前言
this关键字是JavaScript中最复杂的机制之一，是一个特别的关键字，被自动定义在所有函数的作用域中，如何准确判断this指向的是什么？
This是什么？
this 就是一个指针，指向调用函数的对象。
this的绑定规则:
1. 默认绑定 2. 隐式绑定 3. 硬绑定 4. new绑定
1. 默认绑定
默认绑定，在不能应用其它绑定规则时使用的默认规则，通常是独立函数调用。
function sayHi(){
console.log('Hello,', this.name);
}
var name = 'YvetteLau';
sayHi();//Hello, YvetteLau如果在浏览器环境中运行，那么结果就是 Hello,YvetteLau
但是如果在node环境中运行，结果就是 Hello,undefined.这是因为node中name并不是挂在全局对象上的。
当函数独立调用的时候，在严格模式下它的this指向undefined，在非严格模式下，当this指向undefined的时候，自动指向全局对象(浏览器中就是window)
PS：
- 1. 在全局环境下，this就是指向自己
this.a = 1; var b = 1; c = 1; console.log(this === window)//true
- 2. 当this不在函数中用的时候会怎样?
var a = 1000; var obj = { a: 1, b: this.a + 1 } function fun() { var obj = { a: 1, c: this.a + 2 //严格模式下这块报错 Cannot read property 'a' of undefined } return obj.c; } console.log(fun());//1002 console.log(obj.b);//1001
当obj在全局声明的时候，obj内部属性中的this指向全局对象，当obj在一个函数中声明的时候，严格模式下this会指向undefined，非严格模式自动转为指向全局对象。
2. 隐式绑定
函数的调用是在某个对象上触发的，即调用位置上存在上下文对象。
function sayHi(){
console.log('Hello,', this.name);
}
var person = {
name: 'YvetteLau',
sayHi: sayHi
}
var name = 'Wiliam';
person.sayHi();//Hello,YvetteLausayHi函数声明在外部，严格来说并不属于person，但是在调用sayHi时,调用位置会使用person的上下文来引用函数，隐式绑定会把函数调用中的this(即此例sayHi函数中的this)绑定到这个上下文对象（即此例中的person）
对象属性链中只有最后一层会影响到调用位置。
function sayHi(){
console.log('Hello,', this.name);
}
var person2 = {
name: 'Christina',
sayHi: sayHi
}
var person1 = {
name: 'YvetteLau',
friend: person2
}
person1.friend.sayHi();//Hello, Christina只有最后一层会确定this指向的是什么，不管有多少层，在判断this的时候，我们只关注最后一层，即此处的friend
隐式绑定有一个大陷阱，绑定很容易丢失
例一：
function sayHi(){ console.log('Hello,', this.name); } var person = { name: 'YvetteLau', sayHi: sayHi } var name = 'Wiliam'; var Hi = person.sayHi; Hi();//Hello,WiliamHi直接指向了sayHi的引用，在调用的时候，跟person没有半毛钱的关系
例二：(丢失发生在回调函数中)
function sayHi(){ console.log('Hello,', this.name); } var person1 = { name: 'YvetteLau', sayHi: function(){ setTimeout(function(){ console.log('Hello,',this.name); }) } } var person2 = { name: 'Christina', sayHi: sayHi } var name='Wiliam'; person1.sayHi();//Hello Wiliam setTimeout(person2.sayHi,100);//Hello Wiliam setTimeout(function(){ person2.sayHi(); },200);//Hello Christina第一条输出：setTimeout的回调函数中，this使用的是默认绑定，非严格模式下，执行的是全局对象
第二条输出：可以这样理解: 相当于是将person2.sayHi赋值给了一个变量，最后执行了变量，这个时候，sayHi中的this显然和person2就没有关系了。
setTimeout(person2.sayHi,100) <=> setTimeout(function sayHi(){ console.log('Hello,', this.name); },100)第三条输出：虽然也是在setTimeout的回调中，但是执行的是person2.sayHi()，使用的是隐式绑定，因此这是this指向的是person2，跟当前的作用域没有任何关系。
setTimeout(function(){ person2.sayHi();},200) <=> setTimeout(function(){ function sayHi(){ console.log('Hello,', this.name);} },100)
3.显式绑定（硬绑定）
通过call,apply,bind的方式，显式的指定this所指向的对象
call,apply和bind的第一个参数，就是对应函数的this所指向的对象。call【参数列表】和apply【参数数组】的作用一样，只是传参方式不同。call和apply都会执行对应的函数，而bind方法不会。
call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。
function sayHi(){
console.log('Hello,', this.name);
}
var person = {
name: 'YvetteLau',
sayHi: sayHi
}
var name = 'Wiliam';
var Hi = person.sayHi;
Hi.call(person); //Hello, YvetteLau
Hi.apply(person);//Hello, YvetteLau使用硬绑定明确将this绑定在了person上.
显示绑定也会出现绑定丢失
function sayHi(){
console.log('Hello,', this.name);
}
var person = {
name: 'YvetteLau',
sayHi: sayHi
}
var name = 'Wiliam';
var Hi = function(fn) {
fn();
}
Hi.call(person, person.sayHi); // Hello, WiliamHi.call(person, person.sayHi)的确是将this绑定到person中的this了。但是在执行fn的时候，相当于直接调用了sayHi方法(person.sayHi已经被赋值给fn了，隐式绑定也丢了)，没有指定this的值，对应的是默认绑定。
希望绑定不丢失，应该在调用的时候，就进行硬绑定
function sayHi(){
console.log('Hello,', this.name);
}
var person = {
name: 'YvetteLau',
sayHi: sayHi
}
var name = 'Wiliam';
var Hi = function(fn) {
fn.call(this);
}
Hi.call(person, person.sayHi);//Hello, YvetteLauperson被绑定到Hi函数中的this上，fn又将这个对象绑定给了sayHi的函数。这时，sayHi中的this指向的就是person对象。
4. new 绑定
javaScript和Ｃ++不一样，并没有类，在javaScript中，构造函数只是使用new操作符时被调用的函数，这些函数和普通的函数并没有什么不同，它不属于某个类，也不可能实例化出一个类。任何一个函数都可以使用new来调用，因此其实并不存在构造函数，而只有对于函数的“构造调用”。
使用new来调用函数，会自动执行下面的操作：
1.创建一个新对象 2.将构造函数的作用域赋值给新对象，即this指向这个新对象 3.执行构造函数中的代码 4.返回新对象
以上过程用程序描述
function Fun() {
//new做的事情
var obj = {};
obj.__proto__ = Fun.prototype;//Fun为构造函数
obj.name = 'Damonare';
...//一系列赋值以及更多的事
return obj
}使用new来调用函数的时候，就会新对象绑定到这个函数的this上。
function sayHi(name){
this.name = name;
}
var Hi = new sayHi('Yevtte');
console.log('Hello,', Hi.name);// Hello, Yevtte在var Hi = new sayHi('Yevtte')这一步，会将sayHi中的this绑定到Hi对象上。
绑定优先级
四种绑定的优先级为:
new绑定 > 显式绑定 > 隐式绑定 > 默认绑定
绑定例外
如果我们将null或者是undefined作为this的绑定对象传入call、apply或者bind,这些值在调用时会被忽略，实际应用的是默认绑定规则。
var foo = {
name: 'Selina'
}
var name = 'Chirs';
function bar() {
console.log(this.name);
}
bar.call(null); //Chirs 箭头函数
箭头函数是ES6中新增的，它和普通函数有一些区别，箭头函数没有自己的this，它的this继承于外层代码库中的this。
箭头函数在使用时，需要注意以下几点:
（1）函数体内的this对象，继承的是外层代码块的this。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
（5）箭头函数没有自己的this，所以不能用call()、apply()、bind()这些方法去改变this的指向.
var obj = {
hi: function(){
console.log(this);
return ()=>{
console.log(this);
}
},
sayHi: function(){
return function() {
console.log(this);
return ()=>{
console.log(this);
}
}
},
say: ()=>{
console.log(this);
}
}
let hi = obj.hi(); //输出obj对象
hi(); //输出obj对象
let sayHi = obj.sayHi();
let fun1 = sayHi(); //输出window
fun1(); //输出window
obj.say(); //输出window分析一波
- 1.obj.hi(); 对应了this的隐式绑定规则，this绑定在obj上，所以输出obj，很好理解。
- 2.hi(); 执行的是箭头函数，箭头函数继承上一个代码库的this，上一层的this是obj，显然这里的this就是obj.
- 3.执行sayHi();将方法赋值给一个变量，这一步属于隐式绑定丢失的情况，这个时候this执行的是默认绑定，this指向的是全局对象window.
- 4.fun1(); 这一步执行的是箭头函数，箭头函数的this是继承于外层代码库的this。外层代码库，this指向的是window，输出结果是window.
- 5.obj.say(); 执行的是箭头函数，当前的代码块obj中是不存在this的，只能往上找，就找到了全局的this，指向的是window.
*箭头函数的this不是静态的 *
var obj = {
hi: function(){
console.log(this);
return ()=>{
console.log(this);
}
},
sayHi: function(){
return function() {
console.log(this);
return ()=>{
console.log(this);
}
}
},
say: ()=>{
console.log(this);
}
}
let sayHi = obj.sayHi();
let fun1 = sayHi(); //输出window
fun1(); //输出window
let fun2 = sayHi.bind(obj)();//输出obj
fun2(); //输出obj总结
1. 如何准确判断this指向的是什么？
- 1）函数是否在new中调用(new绑定)，如果是，那么this绑定的是新创建的对象。
- 2）函数是否通过call,apply调用，或者使用了bind(即硬绑定)，如果是，那么this绑定的就是指定的对象。
- 3）函数是否在某个上下文对象中调用(隐式绑定)，如果是的话，this绑定的是那个上下文对象。一般是obj.foo()
- 4）如果以上都不是，那么使用默认绑定。如果在严格模式下，则绑定到undefined，否则绑定到全局对象window。
- 5）如果把Null或者undefined作为this的绑定对象传入call、apply或者bind，这些值在调用时会被忽略，实际应用的是默认绑定规则。
- 6）如果是箭头函数，箭头函数的this继承的是外层代码块的this。
2. 例题：
var number = 5;
var obj = {
number: 3,
fn: (function () {
var number;
this.number *= 2;
number = number * 2;
number = 3;
return function () {
var num = this.number;
this.number *= 2;
console.log(num);
number *= 3;
console.log(number);
}
})()
}
var myFun = obj.fn;
myFun.call(null);
obj.fn();
console.log(window.number);分析一波
- 1. 在定义obj的时候，fn对应的闭包就执行了，返回其中的函数，执行闭包中代码时，显然应用不了new绑定(没有出现new 关键字)，硬绑定也没有(没有出现call,apply,bind关键字),隐式绑定有没有？很显然没有，如果没有XX.fn()，那么可以肯定没有应用隐式绑定，所以这里应用的就是默认绑定了，非严格模式下this绑定到了window上(浏览器执行环境)。【这里很容易被迷惑的就是以为this指向的是obj，一定要注意，除非是箭头函数，否则this跟词法作用域是两回事，一定要牢记在心】
window.number * = 2; //window.number的值是10(var number定义的全局变量是挂在window上的) number = number * 2; //number的值是NaN;注意我们这边定义了一个number，但是没有赋值，number的值是undefined;Number(undefined)->NaN number = 3; //number的值为3
- 2. myFun.call(null);call的第一个参数传null，调用的是默认绑定;
fn: function(){ var num = this.number; this.number *= 2; console.log(num); number *= 3; console.log(number); }
执行时：
var num = this.number; //num=10; 此时this指向的是window this.number * = 2; //window.number = 20 console.log(num); //输出结果为10 number *= 3; //number=9; 这个number对应的闭包中的number;闭包中的number的是3 console.log(number); //输出的结果是9
- 3. obj.fn();隐式绑定，fn中的this对应的是obj.
var num = this.number;//num = 3;此时this指向的是obj this.number *= 2; //obj.number = 6; console.log(num); //输出结果为3; number *= 3; //number=27;这个number对应的闭包中的number;闭包中的number的此时是9 console.log(number);//输出的结果是27
- 4. console.log(window.number);输出的结果是20
京公网安备 11010502036488号