1、call、apply、bind
- 都是函数的方法,改变函数内部
this
的指向
函数内部 | this 的指向 |
1、谁调用方法 | this指向谁 |
2、构造函数中的this | 指向new创建的对象 |
3、全局函数的this | 指向全局对象window |
4、箭头函数的this | 指向上下文的this |
2、call方法(改变this
的指向)
// 1、指向window function fun() { console.log(this); } fun(); // 2、指向person let person = { name: "jasmine" }; fun.call(person); // 3、指向person let user = { name: "jasmine_qiqi", getName() { console.log(this.name); } } user.getName.call(person);
3、call方法(实现多种继承)
// ES6(extends) // ES5(原型链) // 4、利用call实现继承(多重) function Person5() { this.login = function () { console.log("登陆功能"); } } function User() { this.crudContent = function () { console.log("增删改查信息"); } } function Admin() { // call:继承 Person5.call(this); User.call(this); } var admin = new Admin(); admin.login(); // 输出结果:登陆功能 admin.crudContent(); // 输出结果:增删改查信息
4、call、apply、bind方法(实现多种继承)
// 4、利用call实现继承(多重) function Person5() { this.name = "jasmine", this.login = function () { console.log("登陆功能"); } } function User() { this.crudContent = function () { console.log("增删改查信息"); } } function Admin() { // call:继承 Person5.call(this); User.call(this); this.getName = function (age) { console.log(`我的姓名:${this.name},我的年龄${age}`); } } var admin = new Admin(); admin.login(); // 输出结果:登陆功能 admin.crudContent(); // 输出结果:增删改查信息 let person6 = new Person5(); admin.getName.call(person6, 18); // 我的姓名:jasmine,我的年龄18 admin.getName.apply(person6, [18]); // 我的姓名:jasmine,我的年龄18 admin.getName.bind(person6, 18)(); // 我的姓名:jasmine,我的年龄18
5、总结
call | 会调用函数,通过参数列表依次传参 |
apply | 会调用函数,通过数组传参 |
bind | 不会调用函数,将新的重新绑定this的函数作为返回值,通过参数列表传参 |