关于this指向问题及改变this指向的方法

this指向详解

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才确定this到底指向谁

一般情况下this指向调用它的对象

下面我们来看看this被调用时的五种情况

思维导图

分析

1.作为对象方法被调用

当函数作为对象方法被调用时this指向该对象

     var obj = {age: 18,fn: function () {console.log(this === obj);//trueconsole.log(this.age);//18}}console.log(obj.fn());

2. 作为普通函数被调用时

this指向全局对象window

严格模式下 this被规定不会指向全局则是undefined

    window.age = 18;function fn() {console.log(this.age);//18}fn()

3.作为构造函数被调用时

构造函数里面的this有点特殊首先我们来了解一下构造函数跟普通函数的区别

//构造函数主要用来初始化对象为对象的成员变量赋值初始值他总于new一起使用

new在构造函数中做了哪些事

//1.在内存中创建一个新的对象

//2.让this指向这个新对象

//3.在构造函数里面的代码,给这个新对象添加属性和方法

//4.返回这个新对象所以构造函数里面一般不需要return

了解之后我们再来看构造函数里面的this

构造函数里的this指向 new创建的实例化对象(没有return的情况下)

如果构造函数内出现了return并且是一个object对象那么最终的运算结果返回这个对象

只要构造函数不返回数据或者返回基本数据类型 this仍然指向实例

   function Fn() {this.age = 18;//此时a.age是return的结果20return {age: 20}}let a = new Fn();console.log(a.age);//20

4.箭头函数里面的this

箭头函数里面没有自己的this 他只会从自己的作用域链上一层继承this

      this.age = 20;var obj = {age: 18,fn: () => {console.log(this.age);//20}}obj.fn()

5.call&& apply&&bind

在function的原型上有三个方法 call apply bind,所有函数都是Function的实例,所以所有的函数都可以调用这三个方法,而这三个方法都是用来改变this指向的

call或apply调用

都是把函数立即执行改变函数中的this指向(第一个参数是谁this就是谁)
apply同理唯一的区别就是传参的格式不一样,apply把传递给函数的形参以数组的形式管理起来,最终的效果和call一样,也是把数组中的每一项作为实参,一个个的传递给函数
真实项目中建议大家使用call,因为其性能好一些(三个及以上参数,call的性能明显比apply好一些)
this存储的值 null.undefined.对象
一个也不写,非严格模式下是window 严格模式下是undefined
null 严格模式下是null非严格模式下是window

    function fn(x, y) {console.log('加油');console.log(this);//this指向windowconsole.log(x + y);}var o = {name: 'andy'}fn.call()//call 呼叫 可以调用函数fn.call(o, 1, 2)//第一个值是this指向, 后边实参fn.apply(o, [10, 20])//apply传递数组fn.call(10, 20)//this-->new Numbe(10) x-->20 y-->undefined

apply的应用小技巧 :获取数组中的最大值

    let arr = [10, 20, 58, 79, 66]console.log(Math.max(arr));//NaN,要求传递数字,不是直接传递数组console.log(Math.max(...arr));//es6中的展开运算符console.log(Math.max.apply(Math, arr));

重新call方法

fn基于__proto__找到Function.prototype.call 把call方法执行
在call方法执行的时候
content: obj要改变的this指向, params;[10, 20]执行函数传递的实参 this: fn要执行的函数
它干的事情是立即把fn(this)函数执行,并且让fn(this)中的this指向obj, 把10,20(params)传递给fn(this),接收fn执行的返回结果,作为最后结果返回

思路:给content设置一个属性(例如:xxx,新增的属性不要和原始content中的属性冲突(symbbol唯一值属性)) 让属性值等于要执行的函数(即:this[fn]),后面基于content.xxx()执行,这样即把函数执行了 ,也让函数的的this改成了content

   Function.prototype.call = function call(content, ...params) {// this-->fn content-->obj params-->[10,20]// 思路:给content设置一个属性(例如:xxx,新增的属性不要和原始content中的属性冲突(symbbol唯一值属性)) 让属性值等于要执行的函数(即:this[fn]),后面基于content.xxx()执行,这样即把函数执行了 ,也让函数的的this改成了contentif (content == null) content = window//this指向为null时指向window// 如果是原始值,字符串设置属性值之后获取不到要变成objectif (! /^objet|funcion$/.test(typeof content)) content = Object(content)//let self = this,key = Symbol('KEY'),result;content[key] = self;result = content[key](...params)// delete content[key]//新增的属性用完后记得移除Reflect.deleteProperty(content, key)//es6中可以基于Reflect.deleteProperty移除对象的某个属性return result}const fn = function fn(x, y) {console.log(this, x, y);return x + y}let obj = {name: 'obj'}let res = fn.call(obj, 10, 20)console.log(res);// fn基于__proto__找到Function.prototype.call 把call方法执行// 在call方法执行的时候// content: obj要改变的this指向, params;[10, 20]执行函数传递的实参 this: fn要执行的函数//它干的事情是立即把fn函数执行,并且让fn中的this指向obj, 把10,20传递给fn,接收fn执行的返回结果,作为最后结果返回

bind

call VS bind

call是立即把函数执行,而bind只是预处理函数中的this和参数,不会立即执行

// 点击按钮 ,fn方法执行,我们想让其中的this变成obj ev事件对象也存在在传递10/20

     <button id="sumit">点击</button>
const sumit = document.querySelector("#sumit")const fn = function fn(x, y, ev) {console.log(this, ev);}let obj = {name: 'obj'}sumit.onclick = fn;//点击按钮时this-->sumit x-->PointerEvent事件对象// 点击按钮 ,fn方法执行,我们想让其中的this变成obj ev事件对象也存在 在传递10/20// sumit.onclick = fn.call(obj, 10, 20)//这样处理是错误的,因为call把函数立即执行了sumit.onclick = function (ev) {//先把事件行为绑定匿名函数,先执行匿名函数(获取ev对象)在匿名函数执行的时候this-->sumit,我们在让真正处理的fn函数执行,此时可以基于call方法改变this'了fn.call(obj, 10, 20, ev)}sumit.onclick = fn.bind(obj, 10, 20)//这样就可以了

重写bind

 <button id="sumit">点击</button>Function.prototype.bind = function bind(context, ...params) {let self = this;// this-->fn contexxt-->obj params-->[10,20]return function proxy(...args) {// args-->ev this-->sumitreturn self.call(context, ...params.concat(args))}}const sumit = document.querySelector("#sumit")const fn = function fn(x, y, ev) {console.log(this, ev);}let obj = {name: 'obj'}sumit.onclick = fn.bind(obj, 10, 20)

总结

函数中的this指向

普通函数下this是window 严格模式下是undefined
对象或方法this指向调用者
构造函数里面的this指向实例对象(原型对象里面的this也指向实例对象在本篇中没有展开)
箭头函数没有自己的this
call和apply可以改变this指向

再来补充几条

绑定点击事件里面的this指向的是调用者
定时器里面的this指向window
立即执行函数里面的this指向window

由此我们可以得出)函数执行的时候，看它前面有没有点，如果有，点前面是谁，this就是谁，如果没有，就是window

----------------------------------------------完结散花-----------------------------------------------------------------------

----------------接受大佬们的批改和指点 ,欢迎留言------------------------------------------------------------------