结论
1、通常不会在全局作用域下使用this，而是在函数中使用this，函数在调用时，js会默认给this绑定一个值
2、this的绑定和定义的位置无关；
3、this的绑定和调用方式以及调用的位置有关；
4、this是在运行时被绑定的；
一、默认绑定（独立函数调用）
情景：独立函数调用时，函数没有被绑定到某个对象上进行调用
要点一：this的指向和函数定义的位置无关
要点二：this的指向和函数的调用方式和调用位置相关
// 案例
const obj = {
name: 'why',
foo: function () {
console.log(this);
},
};
const bar = obj.foo;
bar(); // window
二、隐式绑定
情景：通过某个对象发起函数调用
要点一：必须在调用对象内部有一个对函数的引用，通过这个引用，间接的将this绑定到了对象上
// 案例
function foo() {
return function () {
console.log(this);
};
}
const fn = foo();
fn(); // window
const obj = {
name: 'why',
eating: fn,
};
// 隐式绑定
obj.eating(); // obj
const fn2 = obj.eating;
fn2(); // window
const obj1 = {
name: 'obj1',
foo() {
console.log(this);
},
};
const obj2 = {
name: 'obj2',
foo: obj1.foo,
};
obj2.foo(); // obj2
function foo() {
console.log(this);
}
const obj1 = {
name: "why",
foo,
};
const obj2 = {
name: "coco",
obj1: obj1,
};
obj2.obj1.foo() // obj1
三、显式绑定
情景：不想在调用对象内部添加对函数的引用
要点一：通过apply、call和bind对函数进行绑定，绑定时指定this
要点二：apply和call的传参方式不同
要点三：bind返回一个指定了this的函数，可用于多次调用
function foo() {
console.log('函数被调用了');
}
// 三种方式等同
foo(); // 直接调用
foo.call(); // call
foo.apply(); // apply
function sum(n1, n2, n3) {
console.log(n1 + n2 + n3, this);
}
sum(1, 2, 3); // 6 Window
sum.call('call', 1, 2, 3); // 6 String{'call'}
sum.apply('apply', [1, 2, 3]); // 6 String{'apply'}
const sum2 = sum.bind('bind', 1, 2, 3); // 返回新函数
sum2(); // 6 String{'bind'}
sum2 === sum; // false
const sum3 = sum;
sum3 === sum; // true
四、new绑定
情景：使用new关键字调用一个函数（构造器）,this会在调用构造器时创建出来，this === 创建出来的对象
function Person(name, age) {
this.name = name;
this.age = age;
}
const p1 = new Person('why', 18);
console.log(p1.name, p1.age); // why 18
const p2 = new Person('kobe', 30);
console.log(p2.name, p2.age); // kobe 30
五、绑定规则优先级
1、默认规则优化级最低
2、显示绑定优先级高于隐式
3、new绑定>显示绑定(apply/call/bind)>隐式绑定(obj.foo())>默认绑定(独立函数调用)
// 1、call/apply的显示绑定高于隐式绑定
//
const obj = {
name: 'obj',
foo() {
console.log(this);
},
};
obj.foo(); // {name: 'obj', foo: ƒ}
obj.foo.call('abc'); // String{'abc'}
// 2、bind优化级高于隐式绑定
const bar = obj.foo.bind('cba');
bar();
// 3、更明显的比较
function foo() {
console.log(this);
}
const obj = {
name: 'obj',
foo: foo.bind('aaa'),
};
obj.foo(); // String{'aaa'}
// 4、new优先级高于隐式绑定
const obj = {
name: 'obj',
foo: function() {
console.log(this);
},
};
const f = new obj.foo(); // foo{}
// 5、new高于显示绑定
// new不能和apply/call一起使用
// new高于bind
function foo() {
console.log(this);
}
const bar = foo.bind('aaa');
const bar1 = new bar(); // foo{}
// 6、
foo.bind('abc').call('def'); // String{'abc'}
// 忽略显示绑定
// apply/call/bind：当传入null/undefined时，自动将this绑定成全局对象
function foo() {
console.log(this);
}
foo.apply('abc'); // String{'abc'}
foo.apply({}); // {}
foo.apply(null); // Window
foo.apply(undefined); // Window
const bar = foo.bind(null);
bar(); // Window
// 间接函数引用
const obj1 = {
name: 'obj1',
foo() {
console.log(this);
},
};
const obj2 = {
name: 'obj2',
};
obj2.bar = obj1.foo;
obj2.bar(); // {name: 'obj2', bar: ƒ}
function foo(el) {
console.log(el, this.id);
}
const obj = {
id: 'hello',
};
[1, 2, 3].forEach(foo, obj); // 1 'hello'
六、函数的this分析
const names = ['abc', 'cba', 'bca'];
names.forEach((item) => {
console.log(item, this); // abc window
});
const names = ['abc', 'cba', 'bca'];
names.forEach(function(item) {
console.log(item, this); // abc String {'abc'}
}, 'abc');
七、箭头函数的使用
1）箭头函数不绑定this，而是根据外层作用域来决定this
const obj1 = {
data: [],
getData() {
setTimeout(function () {
console.log(this); // window
}, 0);
},
};
obj1.getData()
const obj2 = {
data: [],
getData() {
setTimeout(() => {
// 箭头函数并不绑定this，会从上层作用于中找到对应的this
console.log(this); // obj2
}, 0);
},
};
obj2.getData()
const obj3 = {
data: [],
getData: () => {
setTimeout(() => {
console.log(this); // window
}, 0);
},
};
obj3.getData()
const fn1 = () => {
return {
name: 'tina',
age: 18,
};
};
// 等价于
const fn2 = () => ({
name: 'tina',
age: 18,
});
// 测试箭头函数中this的指向
const name = 'why';
const foo = () => {
console.log(this);
};
foo();
const obj = { foo }; // Window
obj.foo(); // Window
foo.call('abc'); // Window
const obj = {
data: [],
getData() {
// 箭头函数之前的解决方案，需要手动绑定this
const that = this;
setTimeout(function () {
const result = ['a', 'b', 'c'];
// that.data = result;
console.log(that.data); // []
console.log(this.data); // undefined
}, 2000);
// 使用了箭头函数后的解决方案
// setTimeout(() => { // 箭头函数内无法绑定this
// console.log(this.data); // []
// const result = ['a', 'b', 'c'];
// this.data = result;
// console.log(this.data); // ['a', 'b', 'c']
// }, 2000);
},
};
obj.getData();
const name = 'window';
const person = {
name: 'person',
sayName() {
console.log(this.name);
},
};
function sayName() {
const name = 'w';
const s = person.sayName;
s(); // window：独立函数调用，但是测试这里返回了空
person.sayName(); // person：隐式调用
(person.sayName)(); // person：隐式调用
(b = person.sayName)(); // window：赋值表达式（独立函数调用），但是测试这里返回了空
}
sayName();
const person1 = {
name: 'person1', // 当前作用域
foo1() {
// 上层作用域是全局的window
console.log(this.name);
},
foo2: () => console.log(this.name), // 箭头函数不绑定this，会去上层作用域寻找this
foo3() {
return function () {
console.log(this.name);
};
},
foo4() {
return () => console.log(this.name);
}
};
const person2 = { name: 'person2' };
// person1.foo1(); // 隐式绑定 person1
// person1.foo1.call(person2); // 显示绑定 person2
// person1.foo2(); // window，不绑定作用域，上层作用域是全局window
// person1.foo2.call(person2); // window，同上
// person1.foo3()(); // 独立函数调用，window
// person1.foo3.call(person2)(); // 独立函数调用，window
// person1.foo3().call(person2); // 最终调用返回函数时使用了显示绑定，person2
person1.foo4()(); // person1，箭头函数不绑定this，上层作用域是person1
person1.foo4.call(person2)(); // person2，上层作用域被显式的绑定为person2
person1.foo4().call(person2); // person1，上层作用域为person1
// 对象没有作用域，函数有作用域
// 对象字面量的括号和函数块的括号不一样
const 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，上层作用域中的this是person1
// person1.foo2.call(person2); // person1，上层作用域中的this是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
const name = 'window';
function Person(name) {
this.name = name;
this.obj = {
name: 'obj',
foo1() {
return function () {
console.log(this.name);
};
},
foo2() {
return () => {
// 箭头函数里面没有绑定this，需要去上层作用域找
console.log(this.name);
};
},
};
}
const person1 = new Person('person1');
const 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
