JavaScript之this、call与apply
发布在JavaScript学习笔记2016年1月3日view:2599BrettBatthis
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

JavaScript之this、call与apply

在JavaScript学习中,this的重要性不明而寓,有必要对其深入学习,而与this息息相关的有两个特别需要注意的就是call,apply,本篇就着手从this开始阐述,而后介绍call、apply之用法。

调用一个函数时代码执行控制权就转移到此函数,同时将参数传入此函数,除了声明函数时定义的形式参数,每个函数都会接受两个附加参数:this和arguments。

this

JavaScript中this总是指向一个对象,这个对象基于函数运行时的执行环境动态绑定,而非函数声明时所处环境。

关于执行环境可查看本系列篇JavaScript之作用域与作用域链

this指向

关于this指向问题,与函数调用息息相关,其可大致分为四类情况:

  • (1). 方法调用; 即作为某对象的方法调用。
  • (2). 函数调用;即作为普通函数调用。
  • (3). 构造器函数调用;即以new方式调用。
  • (4). call与apply调用;即以Function.prototype.call或Function.prototype.apply调用。

  • 1.方法调用

    var obj = {
        name: 'Job',
        getName: function() {
            console.log(this === obj); //输出true
            console.log(this.name);  //输出Job
            return this.name;
        }
    };
    obj.getName();

当函数作为对象的方法被调用时,this总是指向该对象。

  • 2.函数调用

    var name = 'Job';
    var getName = function() {
        console.log(this === window);  //输出true
        console.log(this.name);  //输出Job
        return this.name;
    };
    getName(); //普通函数调用

非严格模式下,当函数作为普通函数方式调用时,不论该函数调用时所处执行环境为何,this总是指向全局对象,JavaScript中即是window对象。

再看如下实例,加深理解:


    <script>
        var id = 'windowId';
        document.getElementById('myDiv').onclick = function() {
            console.log(this.id); //输出myDiv
            var fn = function() {
                console.log(this.id); //输出windowId
            };
            fn(); //普通函数调用
        };
    </script>
  • 3.构造器函数调用

    var Animal = function(name) {
        this.name = name;
    };
    var animal = new Animal('Dog');
    console.log(animal.name); //输出Dog

当用new调用构造器函数时,总会返回一个对象,该对象可以看成是构造器函数一个实例,一般,此时构造器里的this就指向返回的这个对象。 但还需要注意的是当构造器显式地返回一个对象时:


    var Animal = function(name) {
        this.name = name;
        return {
            name: 'Job'
        };
    };
    var animal = new Animal('Dog');
    console.log(animal.name); //输出Job   

此时,this指向的是构造器显式返回的对象。

  • 4.call与apply调用

    var obj = {
        name: 'Job',
        getName: function() {
            console.log(this === obj); 
            console.log(this.name);  
            return this.name;
        }
    };
    var obj2 = {
        name: 'Web'
    };
    console.log(obj.getName());  //输出Job
    console.log(obj.getName.call(obj2)); //输出Web
    console.log(obj.getName.apply(obj2)); //输出Web

当以Function.prototype.call或Function.prototype.apply方式调用函数时,动态传入参数改变执行环境,此时this指向传入的对象。

call与apply

call与apply是Function原型上定义的两个方法,其应用广泛。

  • 1.call与apply的区别

两者作用完全一样,不同之处在于传入参数的形式。

call传入参数数量不固定,第一个参数代表所调用函数体内this的指向,而后依次为所调用函数所需参数。

apply接受最多两个参数,第一个参数指定被调用函数内this的指向,第二个参数为一个带下标的集合,可以是数组或者类数组,作为参数传给被调用函数。


    var fn = function(a, b, b) {
        console.log([a, b, c]);
    };
    fn.call(null, 1,2,3);
    fn.apply(null, [1,2,3]);

需要注意的是,非严格模式下,使用call或apply时,第一个参数是必须的,当第一个参数传入null时,函数体内this就会指向被调用函数的宿主对象(其包含对象);而严格模式下,this指向则为null

  • 2.call与apply的应用

(1). 改变this指向 使用call或apply调用函数可改变函数体内this的指向。实例如前文中this指向相关实例。

(2). Function.prototype.bind Function.prototype.bind可以用来绑定函数体内this指向,其参数为this的指向对象。IE8及以下不支持,这里我们可以自己实现一个。


    Function.prototype.bind = function(context) {
        var self = this;  //保存原函数的引用
        return function() { //返回一个新函数
            return self.apply(context, arguments); //将传入的参数指定为新函数体内this的指向对象
        };
    };  
    var obj = {
        name: 'Job'
    };
    var fn = function() {
        console.log(this.name);
    };
    fn.bind(obj)();

(3) 借用其他对象的方法 最熟悉的就是借用构造函数实现类似继承的效果:


    var Animal = function(name) {
        this.name = name;
    };
    var Dog = function() {
        Animal.apply(this, arguments);
    };
    Dog.prototype.getName = function() {
        return this.name;
    };

    var dog = new Dog('Dog');
    console.log(dog.getName());  //输出Dog

另一很常见的情况就是借用Array.prototype对象上的方法处理函数参数类数组arguments:


    (function() {
        Array.prototype.shift.call(arguments); //arguments为类数组[1,2,3]
        var args = Array.prototype.slice.apply(arguments); //将arguments类数组剩余参数转换为数组赋给args变量
        console.log(arguments); //输出[2, 3]
        console.log(args); //输出[2, 3]
    })(1,2,3);

上面借用Array.prototype上的shift方法移除参数列表的首位,当然也可以借用其他方法达到其他目的,如push, slice等。

JavaScript中,call与apply的应用是非常广泛的,在各类Js框架库中,都不难发现其身影。

评论
发表评论
1年前

OneAPM Browser Insight是一个基于真实用户的 Web 前端性能监控平台,可以定位网站性能瓶颈,网站加速效果可视化;支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。可以在官网注册体验哦~

1年前

@宁国互联 谢谢支持O(∩_∩)O

1年前

很赞!!!

1年前
添加了一枚【评注】:e
2年前
赞了此文章!
2年前
赞了此文章!
WRITTEN BY
惊鸿三世
爱前端,爱读书,生命不断,学习不止。
TA的新浪微博
PUBLISHED IN
JavaScript学习笔记

JavaScript学习笔记分享,分享、交流学习心得是进步的最快方式。

我的收藏