关于javascript:JS深挖this绑定问题详解

本章解决问题：1. this 是什么，为何引入？2. 对于 this 的误会
3. this 绑定规定和断定

1、this 是什么，为何引入？

答：

• 实质：this 是 JS 中的一个关键字；
• 作用：this 的作用是通过指向来传递对象的援用；
• 为何引入：为了更优雅的传递对象的应用；
• 如何应用：只有函数才有 this 相干概念，this 的指向齐全取决函数的调用形式；
• 留神点：

1）this 是在运行时绑定的，而非编写时；2）this 的绑定只与函数调用形式无关，与申明无任何关系；

2、目前对于 this 指向有何误会？

答：

1. this 并不是指向函数的调用者：
   - 也就是说 this 并不是单纯的指向它的调用者，而是依附肯定的绑定规定进行优先级的比拟，最终决定 this 的绑定；
2. this 并不指向函数自身：（以上面的一个例子为例）
   - 如果 this 指向的是 fn，那么最终的 cnt 应该是 2，但后果确是 0；
   - 理论这里的 this 绑定的是 widows 对象，所以没扭转 fn 的 count；

function fn () {this.count ++ ;}
fn.count = 0;

for(let i = 0;i<5;i++){if(i > 2) {fn(i);
    }
}

console.log(fn,count);  // 0

3、this 绑定规定

答：
1）默认绑定：

以后执行函数没有下级的时候，this 指向全局对象，在浏览器中就是 Window 对象（非 strict）

2）隐式绑定：

  当函数后面有调用它的对象时，this 指向调用函数最近的对象

2.1）隐式绑定的失落

  在非凡状况下隐式绑定会失落，最常见的两种：作为参数传递和最为变量赋值；- 隐式绑定失落时，this 视为 * 寄托 * 在新的函数中从新定位，如下：- 代码 1 中：作为参数传递失落，从新定位在 fn1 上，所以 this 指向 Window；- 代码 2 中：变量赋值失落，从新定位在 fn 上；

3）显式绑定

    就是应用 call（）apply（）和 bind（）办法手动的扭转 this 的指向；- 代码 3 中：本人扭转 this 的指向并调用函数；- 留神：若第一个参数是 null/undefind，默认指向 Window 全局对象；

4）new 绑定

    当 new 来实现结构函数调用时，顺次执行以下几步：1. 创立 (或者说结构) 一个全新的对象。2. 这个新对象会被执行 [[原型]] 连贯。3. 这个新对象会绑定到函数调用的 this。4. 如果函数没有返回其余对象，那么 new 表达式中的函数调用会主动返回这个新对象。其中的第三步，就是把构造函数的 this 绑定到新的实例对象上并调用，实现属性和办法的继承；- 代码 5 中：new 的过程中 this 绑定到 echo 上，因而 echo 上呈现了 name 属性；

5）4 个绑定的优先级：

    new 绑定 > 显式绑定 >  隐式绑定 > 默认绑定；

// 代码 1
var name = '行星航行';
let obj = {
    name: '听风是风',
    fn: function () {console.log(this.name);
    }
};

function fn1(param) {param();
};
fn1(obj.fn);// 行星航行

// 代码 2
var name = '行星航行';
let obj = {
    name: '听风是风',
    fn: function () {console.log(this.name);
    }
};
let obj1 = {name: '工夫跳跃'}
obj1.fn = obj.fn;
obj1.fn(); // 工夫跳跃

// 代码 3
let obj1 = {name: '听风是风'};
let obj2 = {name: '工夫跳跃'};
var name = '行星航行';

function fn() {console.log(this.name);
};
fn.call(undefined); // 行星航行
fn.apply(null); // 行星航行
fn.bind(undefined)(); // 行星航行

// 代码 5
function Fn(){this.name = '听风是风';};
let echo = new Fn();
echo.name// 听风是风