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

本文链接：https://blog.csdn.net/qq_63358859/article/details/120929759

this指向详解

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

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

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

思维导图

分析

1.作为对象方法被调用

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

     var obj = {
            age: 18,
            fn: function () {
                console.log(this === obj);//true
                console.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的结果20
            return {
                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指向window
        console.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改成了content
        if (content == null) content = window//this指向为null时指向window
        // 如果是原始值,字符串设置属性值之后获取不到要变成object
        if (! /^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-->sumit
            return 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)