JS中this、apply、call、bind

本是古典何须时尚 2023-06-05 12:57 3阅读 0赞

### this指向 ###

记住一句：**this永远指向在执行时最后调用它的对象，**举几个栗子了解一下

栗子1

function a(){
        var user = "CXK";
        console.log(this.user); //undefined
        console.log(this); //Window
    }
    a();

最后调用a()执行的地方前面没有调用对象，那就是默认全局对象window，相当于是window.a();当然如果使用严格模式，全局对象就是undefined，this.user就会报错*`Uncaught TypeError: Cannot read property 'user' of undefined`。*

栗子2

var o = {
        a:10,
        b:{
            a:12,
            fn:function(){
                console.log(this.a); //12
            }
        }
    }
    o.b.fn();

最后调用fn()的对象是b，this只会指向它的上一级对象，所以a是12

栗子3

var o = {
        a:10,
        b:{
            // a:12,
            fn:function(){
                console.log(this.a); //undefined
            }
        }
    }
    o.b.fn();

调用fn()的对象是b，尽管对象b中没有属性a，这个this指向的也是对象b，因为this只会指向它的上一级对象，不管这个对象中有没有this要的东西。

栗子4

这是咋回事，咋又变成window了？敲黑板：this指向是在执行的时候看谁调用的，fn()虽然是被对象b调用，但是并没有执行，真正执行是在j()，根据栗子1可以知道，this最终指向的是window

### 如何改变this指向 ###

**1.\_this = this**

**2.ES6箭头函数**

**3.apply、call、bind**

**4.new实例化一个对象**

通过一个栗子具体看一下

首先要明确**setTimeout中所延迟执行函数中（匿名函数）的this，永远指向window，**很明显window对象下并没有func1()

### 函数内部\_this=this ###

最简单的一种方式

### ES6箭头函数 ###

箭头函数的this指向是函数被创建时绑定的，它的指向就是当前词法作用域中的this，并且不会因为被怎么样的方式调用改变绑定。

### apply、call、bind ###

var a = {
            name : "CXK",
    
            func1: function () {
                console.log(this.name)
            },
    
            func2: function () {
                setTimeout(  function () {
                    this.func1()
                }.apply(a),100);
                //apply(this)/bind(this)/call(this)
            }
    
        };
    
        a.func2()            // CXK

apply、call、bind这三个方法都是用于改变函数内部的this指向，但还是有所区别

**call(thisArgs \[,args...\])**

该方法可以传递一个thisArgs参数和一个参数列表，thisArgs 指定了函数在运行期的调用者，也就是函数中的 this 对象，而参数列表会被传入调用函数中。thisArgs 的取值有以下四种情况：

*  不传，或者传null,undefined， 函数中的 this 指向 window 对象
 *  传递另一个函数的函数名，函数中的 this 指向这个函数的引用
 *  传递字符串、数值或布尔类型等基础类型，函数中的 this 指向其对应的包装对象，如 String、Number、Boolean
 *  传递一个对象，函数中的 this 指向这个对象

这是call 的核心功能，它允许你在一个对象上调用该对象没有定义的方法，并且这个方法可以访问该对象中的属性

当执行b.call 时，字符串\`test\`作为参数传递给了函数b,由于call的作用，函数b中的this指向了对象a, 因此相当于调用了对象a上的函数b,而实际上a中没有定义b 。通过此特性有什么具体使用呢

console.log(Object.prototype.toString.call("jerry"));//[object String]
    console.log(Object.prototype.toString.call(12));//[object Number]
    console.log(Object.prototype.toString.call(true));//[object Boolean]
    console.log(Object.prototype.toString.call(undefined));//[object Undefined]
    console.log(Object.prototype.toString.call(null));//[object Null]
    console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
    console.log(Object.prototype.toString.call(function(){}));//[object Function]
    console.log(Object.prototype.toString.call([]));//[object Array]
    console.log(Object.prototype.toString.call(new Date));//[object Date]
    console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
    function Person(){};
    console.log(Object.prototype.toString.call(new Person));//[object Object]

**apply(thisArgs \[,args\[\]\])**

apply 和 call 的唯一区别是第二个参数的传递方式不同，apply 的第二个参数必须是一个数组（或者类数组），而 call 允许传递一个参数列表。值得你注意的是，虽然 apply 接收的是一个参数数组，但在传递给调用函数时，却是以参数列表的形式传递

var a ={
            name : "CXK",
            fn : function (a,b) {
                console.log( a + b)
            }
        }
    
        var b = a.fn;
        b.apply(a,[1,2])  // 3
        b.call(a,1,2) //3

apply 接收的是数组，在传递给调用函数的时候是以参数列表传递的。 这个特性让apply 看起来比call 略胜一筹，比如求数组中的最大元素，而我们知道，数组中并没有获取最大值的方法，一般情况下，你需要通过编写代码来实现。而我们知道，Math 对象中有一个获取最大值的方法，即Math.max()， max方法需要传递一个参数列表，然后返回这些参数中的最大值。而apply 不仅可以将Math 对象的max 方法应用到其他对象上，还可以将一个数组转化为参数列表传递给max

var arr = [2,3,1,5,4];
     
    Math.max.apply([],arr); // 5

**bind(thisArgs \[,args...\])**

bind是ES5 新增的一个方法，它的传参和call类似，但又和 call/apply 有着显著的不同，即调用 call 或 apply 都会自动执行对应的函数，而 bind 不会执行对应的函数，只是返回了对函数的引用。

var a ={
            name : "CXK",
            fn : function (a,b) {
                console.log( a + b)
            }
        }
    
        var b = a.fn;
        b.apply(a,[1,2])  // 3
        b.bind(a,1,2) //
        b.bind(a,1,2)()  //3

粗略一看，bind 似乎比call/apply 要落后一些，那ES5为什么还要引入bind 呢？

其实，ES5引入 bind 的真正目的是为了弥补 call/apply 的不足，由于 call/apply 会对目标函数自动执行，从而导致它无法在事件绑定函数中使用，因为事件绑定函数不需要我们手动执行，它是在事件被触发时由JS 内部自动执行的。而 bind 在实现改变函数 this 的同时又不会自动执行目标函数，因此可以完美的解决上述问题

var obj = {name:'CXK'};
     
    /**
     * 给document添加click事件监听，并绑定onClick函数
     * 通过bind方法设置onClick的this为obj，并传递参数p1,p2
     */
    document.addEventListener('click',onClick.bind(obj,'p1','p2'),false);
     
    //当点击网页时触发并执行
    function onClick(a,b){
        console.log(
                this.name, //CXK
                a, //p1
                b  //p2
        )
    }

一旦函数通过bind传递了有效的this对象，则该函数在运行期的this将指向这个对象，即使通过call或apply来试图改变this的指向也是徒劳的。看一下mdn上给出的bind实现

// mdn的实现
    if (!Function.prototype.bind) {
      Function.prototype.bind = function(oThis) {
        if (typeof this !== 'function') {
          // closest thing possible to the ECMAScript 5
          // internal IsCallable function
          throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
        }
    
        var aArgs   = Array.prototype.slice.call(arguments, 1),
            fToBind = this,
            fNOP    = function() {},
            fBound  = function() {
              // this instanceof fBound === true时,说明返回的fBound被当做new的构造函数调用
              return fToBind.apply(this instanceof fBound
                     ? this
                     : oThis,
                     // 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的
                     aArgs.concat(Array.prototype.slice.call(arguments)));
            };
    
        // 维护原型关系
        if (this.prototype) {
          // Function.prototype doesn't have a prototype property
          fNOP.prototype = this.prototype; 
        }
        // 下行的代码使fBound.prototype是fNOP的实例,因此
        // 返回的fBound若作为new的构造函数,new生成的新对象作为this传入fBound,新对象的__proto__就是fNOP的实例
        fBound.prototype = new fNOP();
    
        return fBound;
      };
    }

### new实例化对象 ###

如果函数调用前使用了 new 关键字, 则是调用了构造函数。这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象

// 构造函数:
    function myFunction(arg1, arg2) {
        this.firstName = arg1;
        this.lastName  = arg2;
    }
    
    var a = new myFunction("huge","CXK");
    a.firstName ;     // "huge"

这里就要明白在**js中new一个对象的过程**

var a = new myFunction("huge","CXK");
    
    new myFunction{
        var obj = {};
        obj.__proto__ = myFunction.prototype;
        var result = myFunction.call(obj,"huge","CXK");
        return typeof result === 'obj'? result : obj;
    }

1.创建一个空对象

2.将新创建的空对象的隐式原型指向其构造函数的显示原型

3.使用call改变this指向到新实例对象中

4.如果无返回值或者返回一个非对象值，则将 obj 返回作为新对象；如果返回值是一个新对象的话那么直接直接返回该对象。