（二）this、call和apply

时间 2019-12-01

标签 apply 繁體版

原文原文链接

在javascript中，this关键字总让一些初学者迷惑，Function.prototype.call, Function.prototype.apply这两个方法普遍的运用。咱们有必要理解这几个概念。javascript

一:thishtml

跟别的语言截然不同的是，javascript的this老是指向一个对象，而具体指向那个对象在运行时基于函数的执行环境动态绑定的，非函数被声明时的环境。java

(1).this的指向程序员

除去不经常使用的with和eval状况，具体到实际的应用中，this的指向大体分为下面4种。设计模式

做为对象的方法调用
做为普通函数调用
构造器调用
Function.prototype.call或Function.prototype.apply调用

简单作介绍：数组

1)做为对象的方法调用浏览器

当函数做为对象的方法被调用时，this指向该对象：闭包

 var obj = {
     a:1,
     getA:function() {
         alert( this === obj ); //true
         alert( this.a ); //1
     }
 }
 obj.getA()

2)做为普通函数调用app

当函数不做为对象的属性被调用时，也就是咱们常说的普通函数方式，此时的this老是指向全局对象。在浏览器里，就是window对象函数

    window.name = 'globalName';

    var getName = function() {
        return this.name
    }

    //console.log( getName() ) // globalName

    var myObject = {
        name : 'seven',
        getNameA : function() {
            return this.name
        }
    }

    var a = myObject.getNameA
    console.log( a() )

有的时候咱们会碰见一些困扰，好比在div节点内部，有一个局部的callback方法，callback做为普通的函数调用时，callback内部的this指向了window，但咱们每每想让他指向该div节点。以下

<div id="div1">
    div1
</div>
<script type="text/javascript">
     document.getElementById("div1").onclick = function() {
         var that = this;
         console.log(this.id)
        var callback = function(){
            console.log(that.id)//this.id = xx
        }
        callback()
    }
</script>

注意：在ES5的strict模式下，this已经被规定不会指向全局对象，而是undefined

3)构造器调用

javascript目前没有类，可是从构造器中建立对象，同时也提供了new运算符，使得构造器看起来更像一个类。
除了宿主提供的一些内置函数，大部分javascript函数均可以当作构造器来使用。构造器的外表跟普通函数如出一辙，他们的区别在于被调用的方式。当用new运算符调用函数时，该函数会返回一个对象，一般状况下，构造器里的this就指向返回的这个对象，以下

    var myClass = function( name , sex ) {
        this.name = name;
        this.sex = sex;
    };

    var newObj = new myClass('jj','sxxx');
    console.log(newObj.sex + newObj.name)

可是用new调用构造器时，还要注意一个问题，若是构造器显式的返回了一个object类型的对象，那么这次运算结果最终会返回这个对象，而不是咱们以前期待的this

    var myClass = function( name ) {
        this.name = name ;
        return {
            name : 'anam'
        }
    }
    
    var myObj = new myClass('jack')
    console.log(myObj.name) ;//anam

若是构造器不显式的返回任何数据，或者是返回一个对象类型的数据，就不会形成上述问题

    var myClass = function( name ) {
        this.name = name ;
        name : 'anam'
    }
    
    var myObj = new myClass('jack')
    console.log(myObj.name) ;//jack

4）Function.prototype.call和Function.prototype.apply调用

跟普通的函数调用相比，用Function.prototype.call或Function.prototype.apply能够动态的改变传入函数的this

var obj1 = {
    name: 'seven',
    getName: function() {
        return this.name
    }
}

var obj2 = {
    name : 'jack'
}

console.log(obj1.getName()) ;//seven
console.log(obj1.getName.call(obj2)) //jack

call和apply能很好的体现javascript的函数语言特性，在javascript中，几乎每一次编写函数式语言风格代码都离不开call和apply。在javascript诸多版本的设计模式中，也用到了call和apply。在之后咱们分析中会更多说到。

(2)丢失的this

这是一个常常遇到的问题

var obj = {
    myname : 'sven',
    getNname : function() {
        return this.myname;
    }
}

console.log(obj.getNname()) // sven

var getname2 = obj.getNname

console.log(getname2()) ;//undefined

当调用obj.getName时，getName方法是做为obj对象的属性被调用的。（本文1.1）此时，this指向obj对象。
因此obj.getName输出 'sven'

当另一个变量getName2来引用obj.getName,而且调用getname2时，（本文1.2）提到的规律，此时是普通函数调用方式，this是指向全局window的，因此程序执行的是undefined.

咱们再来看一个例子。

document.getElementById()这个方法名字实在有点长。咱们尝试用一个短的函数代替它。

    var getId = function(id) {
        return document.getElementById(id)
    }
    getId('div1')

咱们也许想过为何不用下面更简单方式

    var getId = document.getElementById;
    getId('div1')

咱们在浏览器中运行会出现一个错误，这是由于许多浏览器引擎的document.getElementById方法内部须要用到this。这个this原本被指望指向document，当getElementById方法做为document对象属性被调用时，方法内部的this确实是指向document的。

当getId来引用document.ElementById 以后，再调用getId,此时就成了普通函数调用，函数内部的this指向了window,而不是原来的document.

咱们能够尝试着利用apply把document当作this传入getId函数。帮助修正this

document.getElementById = (function( func ) {
    return function() {
        return func.apply( document, arguments )
    }
})(document.getElementById)

var getId = document.getElementById;
var div = getId('div1');

console.log(div) ;//<div id="div1">div1</div>
console.log(div.id) ;//div1

二：call和apply

ES3给Function的原型定义了两个方法。Function.prototype.call和Function.prototype.apply。在实际开发中，特别是在一些函数式代码编写中，call和apply方法尤为有用。在javascript的设计模式中，应用也十分普遍。能熟练应用这两个方法，是成为一名javascript程序员的重要一步。

(1)call和apply的区别。

Function.prototype.call和Function.prototype.apply都是很是经常使用的方法，它们的做用如出一辙，区别仅仅在传入参数形式的不一样。

apply接受两个参数，第一个参数指定了函数体内this对象的指向，第二个参数为一个带下标的集合（这个集合能够是数组，也能够为类数组）。apply方法把这个集合的元素做为参数传递给被调用的函数。

    var func = function( a, b, c ){
        console.log([a,b,c]) ;//输出[1, 2, 3]
    }
    console.log(func())
    func.apply(null, [1,2,3])

在这段代码中，参数1,2,3被放在数组中一块儿传入func函数。它们分别对应func参数列表中的a,b,c

call传入参数数量不固定，跟apply相同的是，第一个参数也是表明函数体内的this指向，从第二个参数开始日后，每一个参数被依次传入函数。

    var func = function( a, b, c ) {
        console.log([a, b, c])  //[1, 2, 3]
    }

    func.call( null, 1, 2, 3 )

当调用一个函数时，javascript的解释器并不会计较形参和实参的数量，类型以及顺序上的区别，javascript的参数在内部就是用一个数组来表示的。从这个意义上说，apply比call的使用率更高。咱们没必要关心具体有多少参数被传入函数，只要apply一股脑的推过去就行。

call是包装在apply上面的一颗语法糖，若是咱们明确知道了函数接受多少个参数，并且想一目了然的表达形参和实参的对应关系。那么也能够用call来传送参数。

当使用call或apply的时候，若是咱们传入的第一个参数为null，函数体内的this会指向默认的宿主对象。在浏览器中则是window.

var func = function( a, b, c ){
    console.log( this === window ) //true
};
func.apply(null,[1,2,3])

可是在严格模式下，函数体内的this仍是为null

var func = function( a, b, c ){
    "use strict"
    console.log( this === null ) //true
};
func.apply(null,[1,2,3])

有时咱们使用call或者apply的目的不在于指定this指向，而是另有用途，好比借用其它的对象方法。那么咱们能够传入null来代替某个具体对象。

Math.max.apply(null,[1,2,3,4,5,6,7]) //7

(2)call和apply的用途

前面说过，可以熟练使用call和apply，是成为一名正真的javascript程序员的重要一步，下面咱们就来详细说说call和apply在实际开发中的用途。

1).改变this的指向

call和apply最多见的用途就是改变this的指向，下面咱们来看个例子：

    var obj1 = {
        name : 'seven'
    }

    var obj2 = {
        name : 'anne'
    }

    window.name = 'window'

    var getName = function() {
        console.log(this.name)
    }

    getName();
    getName.call(obj1)
    getName.call(obj2)

当执行getName.call(obj1)时，getName函数体内的this就指向obj1对象，因此此处的

    var getName = function() {
        console.log(this.name)
    }

至关于：

    var getName = function() {
        console.log(obj.name)
    }

在实际开发中，常常会遇到this指向被不经意改变的场景，好比有一个div节点，func函数体内的this就指向的window，而不是咱们预期的div.

<div id="div1">div1</div>

<script type="text/javascript">
document.getElementById('div1').onclick = function(){
    console.log(this.id) //div1
}
</script>

假如该事件函数中有一个内部函数func，在事件的内部调用 func函数时，函数体内的this就指向了window,而不是咱们预期的div,见以下代码：

document.getElementById('div1').onclick = function(){
    console.log(this.id) //div1
    function func(){
        console.log(this.id) //undefined
    }
    func()
}

这个时候，咱们用call来修正func函数内的this,使其依然指向div

document.getElementById('div1').onclick = function(){
    console.log(this.id) //div1
    function func(){
        console.log(this.id) //div1
    }
    func.call(this)
}

使用call修正this的场景，咱们并不是第一次遇到，上一节中，咱们曾经修复过document.getElementById函数内部“丢失”的this,代码以下：

document.getElementById = (function( func ){
    return function() {
        return func.apply( document, arguments );
    }
})( document.getElementById )

var getId = document.getElementById
var div = getId('div1')
console.log(div.id) //div1

2).Function.prototype.bind

大部分高级浏览器都实现了内置的Function.prototype.bind,用来指定函数内部的this指向。（即便没有原生的Function.prototype.bind，模拟起来也不算难事）

Function.prototype.bind = function( context ) {
    var self = this;
    return function() {
        return self.apply( context, arguments )
    }
};

var obj = {
    name : 'seven'
}

var getName = function() {
    console.log(this.name)
}.bind(obj)

getName() ; //seven

咱们经过Function.prototype.bind来“包装” func函数，而且传入一个对象context当作参数，这个context对象就是咱们要修正的this对象。

3).借用其它对象的方法

咱们知道，杜鹃既不会筑巢，也不会孵鸟，而是把本身的蛋生在其它的鸟巢，让他们代为孵化和养育，一样，在javascript中也存在借用现象。

借用的第一种方法是“借用构造函数”，经过技术，能够实现一些相似的继承结果。

var A = function( name ){
    this.name = name;
}

var B = function() {
    A.apply(this, arguments);
}

B.prototype.getName = function() {
    return this.name
}

var b = new B('sven');
console.log(b.getName()) //sven

借用方法的第二种运用场景跟咱们的关系更密切。

函数的参数列表 arguments 是一个类数组对象，虽然它也有下标，但它并不是正真的数组，因此不能像数组同样，进行排序操做或者往集合里添加一个新的元素。这种状况下，咱们经常会借用Array.prototype对象上的方法，好比：想往argumments中添加一个新的元素，一般会借用Array.prototype.push

(function(){
    Array.prototype.push.call( arguments, 3)
    console.log(arguments) //[12, 1, 1, 23, 3]
})(12,1,1,23)

在操做arguments时，咱们很是频繁的找Array.prototype对象借用方法。

想把arguments转成真正的数组的时候，能够借用Array.prototype.slice方法，想截取arguments列表中的头一个元素时，可使用Array.prototype.shift方法，这种机制的内部原理，咱们能够翻开V8引擎源码，以Array.prototype.push方法为例。看看其实现

function ArrayPush() {
    var n = TO_UINT32( this.length ); //被push的对象的length
    var m = %_ArgumentsLength(); //push的参数个数

    for (var i = 0; i < m; i++) {
        this[i + n] = %_ArgumentsLength( i ); //复制元素 （1）
    }

    this.length = n + m; //修正length属性的值  （2）
    return this.length;
};

从这段代码咱们看出，Array.prototype.push其实是一个属性复制的过程，把参数按照下标依次添加到被push的对象上面，顺便修改了这个对象的length属性，至于被修改的对象是谁，究竟是数组仍是类数组对象，这一点并不重要。

由此，咱们能够推断，咱们把“任意对象”传入Array.prototype.push:

var a = {};

Array.prototype.push.call(a, 'frist');
Array.prototype.push.call(a, 'second');
console.log(a.length) //2
console.log(a[0]) //frist

对于“任意对象”，咱们从ArrayPush()函数的(1)和(2)能够猜到，这个对象还要知足：

对象的自己能够读取属性
对象的lenth属性可读写

（本文已经完结）

上一篇文章：（一）面向对象的javascript 下一篇文章 （三）闭包和高阶函数