call/apply/bind 的理解与实例分享

PingCAP 发布于2019-08-21 10:46 / 3154人阅读

摘要：可以改变函数的指向。除了传递参数时有所差别，和作用完全一样。因此最终的返回结果会是。其中传递的参数为数组形式传递的参数为按顺序依次排列。一个简单的实例说明。

call/apply 可以改变函数的this指向。除了传递参数时有所差别，call和apply作用完全一样。

var tim = { 
    name: "tim", 
    age: 20, 
    getName: function() {
        console.log(this.name);
        return this.name; 
    }
}

var jake = { name: "jake", age: 20 }

tim.getName(); // tim

// jake对象没有getName方法，但是可以通过call/apply去使用tim对象的getName方法
tim.getName.call(jake);  // jake 
tim.getName.apply(jake); // jake

tim.getName.call(jake)的意思是执行getName方法，但是通过call/apply将getName方法中的this指向强行设置为jake对象。因此最终的返回结果会是jake。

call apply的不同之处在于传递参数的形式。其中apply传递的参数为数组形式, call传递的参数为按顺序依次排列。一个简单的实例说明。

// 当参数个数不确定或者你觉得用apply比较爽时, 就直接使用apply
// 字面解释就是obj夺舍fn，obj拥有了执行fn函数的能力，并且this指向obj.
var arguments = { 0:"name", 1:"age", 2:"gender" };

fn.apply(obj, arguments);
fn.call(obj, name, age, gender);

下面我收集了几个我遇到过的实际例子

将类数组形式转换为数组

// arguments
// 返回值为数组，arguments保持不变
var arg = [].slice.call(arguments);

// nodeList
var nList = [].slice.call(document.getElementsByTagName("li"));

方法借用

var foo = {
    name: "joker",
    showName: function() {
        console.log(this.name);
    }
};
var bar = {
    name: "rose"
};

foo.showName.call(bar); // rose

在继承中的应用

// parent
var Person = function(name) {
    this.name = name;
    this.gender = ["man", "woman"];
}

// child
var Student = function(name, age) {

    // inherit
    Person.call(this);
}
Student.prototype.message = function() {
    console.log("name:"+this.name+", age:"+this.age+", gender:."+this.gender[0]);
}

var xm = new Student("xiaom", 12);
xm.message(); //name:undefined, age:undefined, gender:.man

封装对象时保证this指向

var Nicco = function(name) {
    this.name = name;
}
Nicco.prototype = function() {
    constructor: Nicco,

    message: function() {
        var _this = this;
        addEventListener(
            "mousedown",
            function() {
                // stay this
                return _this.fndown.call(_this);
            },
            false
        );
    },

    fndown: function() {
        var
            _this = this,
            str = this.name + ", i miss you.";
        addEventListener(
            "mouseup",
            function() {
                return _this.fnup.call(_this, str);
            },
            false
        );
    },

    fnup: function(str) {
        console.log(str);
    }
}

GPU云服务器云服务器深度学习与理解 php微信分享实例 js实例微信分享企业云服务器选型与部署过程分享

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86168.html

《javascript高级程序设计》函数调用模式 & this深度理解

在上一篇文章（《javascript高级程序设计》笔记：Function类型）中稍微提及了一下函数对象的属性—this，在这篇文章中有深入的说明：函数的三种简单调用模式 1 函数模式定义的函数，如果单独调用，不将其与任何对象关联，那么就是函数调用模式 function fn(num1, num2) { console.log(this); } // 直接在全局调用 fn();// w...

wyk1184 2019-08-21 16:22 评论0 收藏0
ES5 call,apply,bind方法总结（包括理解this的指向问题）

总结call,apply,bind方法的理解使用和区别。 call,apply,bind这三个方法在JavaScript中是用来改变函数调用的this指向。那么改变函数this指向有什么用呢？我们先来看一段代码 var a= { name:harden, fn:function () { console.log(this.name); } } var b =...

nanchen2251 2019-08-23 18:15 评论0 收藏0
理解 JavaScript call()/apply()/bind()

摘要：理解文章中已经比较全面的分析了在中的指向问题，用一句话来总结就是的指向一定是在执行时决定的，指向被调用函数的对象。与和直接执行原函数不同的是，返回的是一个新函数。这个新函数包裹了原函数，并且绑定了的指向为传入的。理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题，用一句话来总结就是：this 的指向一定是在执行时决定的，...

duan199226 2019-08-23 14:27 评论0 收藏0
js 面试官想了解你有多理解call,apply,bind?

摘要：返回值这段在下方应用中有详细的示例解析。回调函数丢失的解决方案绑定回调函数的指向这是典型的应用场景绑定指向，用做回调函数。 showImg(https://segmentfault.com/img/remote/1460000019971331?w=1024&h=680); 函数原型链中的 apply，call 和 bind 方法是 JavaScript 中相当重要的概念，与 this...

wuaiqiu 2019-08-26 10:33 评论0 收藏0
理解 JavaScript this

摘要：回调函数在回调函数中的指向也会发生变化。在闭包回调函数赋值等场景下我们都可以利用来改变的指向，以达到我们的预期。文章参考系列文章理解闭包理解执行栈理解作用域理解数据类型与变量原文发布在我的公众号，点击查看。这是本系列的第 5 篇文章。还记得上一篇文章中的闭包吗？点击查看文章理解 JavaScript 闭包。在聊 this 之前，先来复习一下闭包： var name = Nei...

zombieda 2019-08-23 14:10 评论0 收藏0