正常操作，正常分析，大家好，我是 D1n910。

在上周内部分享教学 React 的时候，讲到了 React 组件绑定事件

其中传递方法的时候需要用 bind 硬绑定一次 this，然后再传递进去。像下面这样：

下面这篇文章

《this 的绑定与丢失问题》https://www.jianshu.com/p/6e943792a82a 

系统阐述了 this 使用场景。

 this 的四种绑定方法

一、new绑定

new方式是优先级最高的一种调用方式，构造函数只是一些使用new操作符时被调用的函数。

只要使用new方式调用一个构造函数，this一定指向new调用函数新创建的对象。

使用new来调用函数的时候会自动执行下面的操作：
①、创建（或这说构造）一个全新的对象
②、这个新的对象会被执行[[Prototype]]连接
③、这个新对象会绑定到函数调用的this。
④、如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象

二、显式绑定

显式绑定是通过call()和apply()方法强制制定某些对象对函数进行调用，this则强制指向 调用函数的对象。

可以使用 call(obj, params1,params)、apply(obj, [params1, params2])、bind(obj, params1,params) 来进行绑定。

他们的不同是 call 、apply 是绑定对象后立即执行函数，而 bind 则是返回绑定对象后的函数。

三、隐式绑定

指通过为对象添加属性，该属性的值即为要调用的函数，进而使用该对象调用函数。

四、默认绑定

其他规则无法应用的时候，this 会指向 window，严格模式下，则是指向 undefined。

严格模式下

隐式丢失

在隐式绑定时，使用了 引用赋值 或者 传参赋值。会导致丢失。在非严格模式，this 会绑定在全局对象 window 上，

1.1、引用赋值

举个 🌰

这里的 fooCopyFn 被赋值的其实是 foo 本身，相当于 var fooCopyFn = foo

demoObj 只是作为中间桥，demoObj.foo 起到的是传递的作用。

fooCopyFn 本身无 data，最终打印出来的，是 window 对象上的 data

1.2、参数传递

参数传递导致 this 丢失的情况和上面的情况相同，只不过一般不会被人发现

在 fooCopyFn 函数的参数传递里，隐藏了 fn = demoObj.foo

总结下上面的丢失问题

（1）这种引用赋值传递的函数（函数本身也是对象）很单纯，指向的 this 没固定（比如就不是原来的对象）；

（2）函数运行时，指向的 this 为所处的作用域；

在学 React 的事件绑定学的 bind 方法很好解决这个问题

在这里 bind 方法会返回一个新的 this 指向为 demoObj  的不纯洁 foo 方法。

那么就能够指向成功了。

React 其实就是在赋值的时候，隐式绑定丢失了 this。

拓展内容

诡异的箭头函数

我们经常使用箭头函数，一方面是因为它是一种语法糖，让我们少写了一些代码内容，一方面则是它能使得内部的 this 固定绑定在了所属父级作用域上。

比如这里的 this 就被绑定到了 window 上。

我们用 bind 硬绑定修改是不行的。

拓展可以用 call 改变了所属父级作用域 this 的指向。

-- END --