結(jié)論
1媳板、通常不會(huì)在全局作用域下使用this，而是在函數(shù)中使用this泉哈，函數(shù)在調(diào)用時(shí)蛉幸，js會(huì)默認(rèn)給this綁定一個(gè)值
2破讨、this的綁定和定義的位置無關(guān)；
3奕纫、this的綁定和調(diào)用方式以及調(diào)用的位置有關(guān)提陶；
4、this是在運(yùn)行時(shí)被綁定的匹层；
一隙笆、默認(rèn)綁定（獨(dú)立函數(shù)調(diào)用）
情景：獨(dú)立函數(shù)調(diào)用時(shí)，函數(shù)沒有被綁定到某個(gè)對(duì)象上進(jìn)行調(diào)用
要點(diǎn)一：this的指向和函數(shù)定義的位置無關(guān)
要點(diǎn)二：this的指向和函數(shù)的調(diào)用方式和調(diào)用位置相關(guān)
// 案例
const obj = {
name: 'why',
foo: function () {
console.log(this);
},
};
const bar = obj.foo;
bar(); // window
二升筏、隱式綁定
情景：通過某個(gè)對(duì)象發(fā)起函數(shù)調(diào)用
要點(diǎn)一：必須在調(diào)用對(duì)象內(nèi)部有一個(gè)對(duì)函數(shù)的引用撑柔，通過這個(gè)引用，間接的將this綁定到了對(duì)象上
// 案例
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
三您访、顯式綁定
情景：不想在調(diào)用對(duì)象內(nèi)部添加對(duì)函數(shù)的引用
要點(diǎn)一：通過apply铅忿、call和bind對(duì)函數(shù)進(jìn)行綁定，綁定時(shí)指定this
要點(diǎn)二：apply和call的傳參方式不同
要點(diǎn)三：bind返回一個(gè)指定了this的函數(shù)灵汪，可用于多次調(diào)用
function foo() {
console.log('函數(shù)被調(diào)用了');
}
// 三種方式等同
foo(); // 直接調(diào)用
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); // 返回新函數(shù)
sum2(); // 6 String{'bind'}
sum2 === sum; // false
const sum3 = sum;
sum3 === sum; // true
四檀训、new綁定
情景：使用new關(guān)鍵字調(diào)用一個(gè)函數(shù)（構(gòu)造器）,this會(huì)在調(diào)用構(gòu)造器時(shí)創(chuàng)建出來，this === 創(chuàng)建出來的對(duì)象
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
五享言、綁定規(guī)則優(yōu)先級(jí)
1峻凫、默認(rèn)規(guī)則優(yōu)化級(jí)最低
2、顯示綁定優(yōu)先級(jí)高于隱式
3担锤、new綁定>顯示綁定(apply/call/bind)>隱式綁定(obj.foo())>默認(rèn)綁定(獨(dú)立函數(shù)調(diào)用)
// 1蔚晨、call/apply的顯示綁定高于隱式綁定
//
const obj = {
name: 'obj',
foo() {
console.log(this);
},
};
obj.foo(); // {name: 'obj', foo: ?}
obj.foo.call('abc'); // String{'abc'}
// 2、bind優(yōu)化級(jí)高于隱式綁定
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優(yōu)先級(jí)高于隱式綁定
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：當(dāng)傳入null/undefined時(shí)累舷，自動(dòng)將this綁定成全局對(duì)象
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
// 間接函數(shù)引用
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'
六、函數(shù)的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');
七被盈、箭頭函數(shù)的使用
1）箭頭函數(shù)不綁定this，而是根據(jù)外層作用域來決定this
const obj1 = {
data: [],
getData() {
setTimeout(function () {
console.log(this); // window
}, 0);
},
};
obj1.getData()
const obj2 = {
data: [],
getData() {
setTimeout(() => {
// 箭頭函數(shù)并不綁定this，會(huì)從上層作用于中找到對(duì)應(yīng)的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,
};
};
// 等價(jià)于
const fn2 = () => ({
name: 'tina',
age: 18,
});
// 測試箭頭函數(shù)中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() {
// 箭頭函數(shù)之前的解決方案，需要手動(dòng)綁定this
const that = this;
setTimeout(function () {
const result = ['a', 'b', 'c'];
// that.data = result;
console.log(that.data); // []
console.log(this.data); // undefined
}, 2000);
// 使用了箭頭函數(shù)后的解決方案
// setTimeout(() => { // 箭頭函數(shù)內(nèi)無法綁定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：獨(dú)立函數(shù)調(diào)用仲翎，但是測試這里返回了空
person.sayName(); // person：隱式調(diào)用
(person.sayName)(); // person：隱式調(diào)用
(b = person.sayName)(); // window：賦值表達(dá)式（獨(dú)立函數(shù)調(diào)用）帘营，但是測試這里返回了空
}
sayName();
const person1 = {
name: 'person1', // 當(dāng)前作用域
foo1() {
// 上層作用域是全局的window
console.log(this.name);
},
foo2: () => console.log(this.name), // 箭頭函數(shù)不綁定this，會(huì)去上層作用域?qū)ふ襱his
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()(); // 獨(dú)立函數(shù)調(diào)用廓脆，window
// person1.foo3.call(person2)(); // 獨(dú)立函數(shù)調(diào)用蚊伞，window
// person1.foo3().call(person2); // 最終調(diào)用返回函數(shù)時(shí)使用了顯示綁定颅停，person2
person1.foo4()(); // person1，箭頭函數(shù)不綁定this，上層作用域是person1
person1.foo4.call(person2)(); // person2，上層作用域被顯式的綁定為person2
person1.foo4().call(person2); // person1，上層作用域?yàn)閜erson1
// 對(duì)象沒有作用域，函數(shù)有作用域
// 對(duì)象字面量的括號(hào)和函數(shù)塊的括號(hào)不一樣
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街佑，獨(dú)立函數(shù)調(diào)用
// 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 () => {
// 箭頭函數(shù)里面沒有綁定this，需要去上層作用域找
console.log(this.name);
};
},
};
}
const person1 = new Person('person1');
const person2 = new Person('person2');
// person1.obj.foo1()(); // window，獨(dú)立函數(shù)調(diào)用
// person1.obj.foo1.call(person2)(); // window鳞上，獨(dú)立函數(shù)調(diào)用
// person1.obj.foo1().call(person2); // person2，顯示綁定
person1.obj.foo2()(); // obj
person1.obj.foo2.call(person2)(); // person2
person1.obj.foo2().call(person2); // obj
