this让人琢磨不透。普通函数因为随着调用它的对象而改变,箭头函数却始终是跟着自己的外层,不能被修改指向。是驾驶小船挑战未知的海域还是坐着大船安安稳稳呢。
>> 改变this的指向有哪些方法
<< call、apply、bind、箭头函数、使用_this = this
>> 有什么区别
<<
// call和apply改变this指向 只是后面带的参数不同
call(obj,e,e,e)
applay(obj,[e,e,e])
在非严格模式下使用 call 和 apply 时,如果用作 this 的值不是对象,则会被尝试转换为对象。null 和 undefined 被转换为全局对象
// bind需要调用
bind(obj)(e,e,e)
// 普通函数 this 永远指向最后调用它的那个对象
// 箭头函数里面的this是由外层作用域来决定的,且指向函数定义时的this而非执行时
var name = "window";
function Person(name) {
this.name = name;
this.obj = {
name: "obj",
foo1: function () {
return function () {
console.log(this.name);
};
},
foo2: function () {
return () => {
console.log(this.name);
};
},
};
}
var person1 = new Person("person1");
var person2 = new Person("person2");
person1.obj.foo1()(); // 'window'
person1.obj.foo1.call(person2)(); // 'window'
person1.obj.foo1().call(person2); // 'person2'
person1.obj.foo2()(); // 'obj'
person1.obj.foo2.call(person2)(); // 'person2'
person1.obj.foo2().call(person2); // 'obj'
var name = "window";
function Person(name) {
this.name = name;
(this.foo1 = function () {
console.log(this.name);
}),
(this.foo2 = () => console.log(this.name)),
(this.foo3 = function () {
return function () {
console.log(this.name);
};
}),
(this.foo4 = function () {
return () => {
console.log(this.name);
};
});
}
var person1 = new Person("person1");
var person2 = new Person("person2");
person1.foo1(); // 'person1'
person1.foo1.call(person2); // 'person2'
person1.foo2(); // 'person1'
person1.foo2.call(person2); // 'person1'
person1.foo3()(); // 'window'
person1.foo3.call(person2)(); // 'window'
person1.foo3().call(person2); // 'person2'
person1.foo4()(); // 'person1'
person1.foo4.call(person2)(); // 'person2'
person1.foo4().call(person2); // 'person1'