this
this的指向
this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，指向window对象时可以省略不写，例如：
this.alert() <=> window.alert()<=> alert();
全局环境 就是在<script></script>里面，这里的this始终指向的是window对象，
局部环境
1）在全局作用域下直接调用函数，this指向window
2）对象函数调用，哪个对象调用就指向哪个对象
3）使用 new 实例化对象，在构造函数中的this指向实例化对象。
4）使用call或apply改变this的指向
1.普通函数调用，此时 this 指向 window；
在全局作用域中，this 指向 window
function fn() {console.log(this); // window}fn(); // window.fn(),此处默认省略window
2.构造函数调用， 此时 this 指向 实例对象
构造函数配合new使用, 而new关键字会将构造函数中的this指向实例化对象
function Person(age, name) {this.age = age;this.name = nameconsole.log(this) // 此处 this 分别指向 Person 的实例对象 p1 p2}var p1 = new Person(18, 'zs')var p2 = new Person(18, 'ww')
3.对象方法调用， 此时 this 指向 该方法所属的对象
var obj = {fn: function () {console.log(this); // obj}}obj.fn();
4.通过事件绑定的方法， 此时 this 指向 绑定事件的对象
事件源.onclik = function(){ } this -> 事件源
事件源.addEventListener(function(){ }) this->事件源
<body><button id="btn">hh</button>
<script>var oBtn = document.getElementById("btn");oBtn.onclick = function() {console.log(this); // btn}
</script>
</body>
5.定时器函数， 此时 this 指向 window
因为定时器中采用回调函数作为处理函数，而回调函数的this 指向 window
setInterval(function () {console.log(this); // window}, 1000);
6.箭头函数中的this
箭头函数没有自己的this，箭头函数的this就是上下文中定义的this，因为箭头函数没有自己的this所以不能用做构造函数。
call()、apply()、bind()
每个函数都包含两个非继承而来的方法：call()方法和apply()方法。
一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变函数体内部this的指向。
改变函数执行时的上下文环境：当函数被作为对象的方法调用时，this指向调用该方法的对象。需要控制函数内部的this指向其他对象，可以使用call、apply或bind方法来达到目的。
相同点 : 作用一样。都是在特定的作用域中调用函数，等于设置函数体内this对象的值，扩充函数赖以运行的作用域。
不同点 ： 接收参数的方式不同。
- **apply()方法 **接收两个参数，一个是函数运行的作用域（
this），另一个是参数数组。 - call()方法 不一定接受两个参数，第一个参数也是函数运行的作用域（
this），但是传递给函数的参数必须列举出来。 - **bind()**只有一个函数，不会立刻执行，负责绑定this并返回一个新方法
| bind | apply | call | |
|---|---|---|---|
| 是否执行调用的函数 | 否 | 是 | 是 |
| 参数 | (this指向，参1，参2…) | (this指向，[参数数组]) | (this指向，参1，参2…) |
| 用途 | 改变定时器内部的this指向等 | 跟数组有关系，比如借助于数学对象实现数组最大值最小值 | 经常用做继承 |
bind使用
let btn = document.querySelector('button')
btn.onclick = function() {this.disabled = true // 这个this指向btnlet that = thissetTimeout(function() {// this.disabled = false // 定时器函数里面的this指向的是window// that.disable = false 可行的方法this.disabled = false}.bind(this), 3000)
}
手撕call、apply及bind方法
call()实现思路：
- 上下文不传默认为window
- 做防止
Function.prototype.myCall()直接调用的判断 - 把this方法(this指向调用bind()的方法)挂载到上下文对象上，需要用
Symbol声明一个对象属性 - 执行上下文刚挂载的函数，保存返回结果result后，删除挂载的方法
- 返回结果result
Function.prototype.myCall = function (context = window, ...args) {if (this == Function.prototype) {return undefined; // 防止Function.prototype.myCall()直接调用}const fn = Symbol("fn");// this指向的是要被执行的函数，也就是call的第一个参数// 其实就是把this挂载到上下文对象上，然后执行它，执行完拿到返回结果后，删除挂载的函数context[fn] = this;const result = context[fn](...args);delete context[fn];return result;
};
// 示例
const obj = {name: "zhangsan",age: 18,
};let fun = function (mes, sym) {console.log(mes + sym, this.age + "岁的" + this.name);
};fun.myCall(obj, "Hello", "!"); // Hello! 18岁的zhangsan
apply()实现思路：
跟call()的实现思路一模一样，只是参数变数组
Function.prototype.myApply = function (context = window, args = []) {if (this == Function.prototype) {return undefined; // 防止Function.prototype.myApply()直接调用}const fn = Symbol("fn");context[fn] = this;const result = context[fn](...args);delete context[fn];return result;
};
// 示例
const obj = {name: "zhangsan",age: 18,
};let fun = function (mes, sym) {console.log(mes + sym, this.age + "岁的" + this.name);
};
fun.myApply(obj, ["Hello", "!"]); // Hello! 18岁的zhangsan
bind()实现思路
- 初始化上下文不传默认为window
- 做防止
Function.prototype.myBind()直接调用的判断 - 保存原函数
- 返回一个新函数，新函数返回传的参数整合了原函数的参数原函数.apply()方法
Function.prototype.myBind = function (context = window, ...args) {if (this == Function.prototype) {return undefined; // x}// 拿到原函数const fn = this;// 返回一个新的函数，函数的参数整合了原函数+新函数return function (...newArgs) {return fn.apply(context, args.concat(newArgs));};
};// 示例
const obj = {name: "zhangsan",age: 18,
};let fun = function (mes, sym) {console.log(mes + sym, this.age + "岁的" + this.name);
};
const f = fun.myBind(obj); // 返回新函数
f("Hello", "!"); // Hello! 18岁的zhangsan
