JavaScript 中 call()、applay()、bind()的用法

2022-02-24 13:35:43 阅读：214 来源： 互联网

标签：obj name myFun bind age JavaScript call var data

很多人分不清这三个的用法，其实很简单
例子一：

var name = "张三", age = 23;
var obj = {
    name: "李四",
    objAge: this.age,
    myFun: function() {
        console.log(`我叫${this.name}, 今年${this.age}了`);
    }
}

console.log(obj.objAge);    // 23
obj.myFun();                // 我叫李四, 今年undefined了

例子二：

var fva = "孤语";
function show () { 
    console.log(this.fva);
}
show();   // 孤语

例子一和例子二的区别在于，例子一打印里面的this指向的是 obj, 例子二打印里的this指向的是 window。

call(), apply(), bind() 都是重新定义 this 指向的

var name = "张三", age = 23;
var obj = {
    name: "李四",
    objAge: this.age,
    myFun: function() {
        console.log(`我叫${this.name}, 今年${this.age}了`);
    }
}

var data = {
  name: "赵云",
  age: 22
}

obj.myFun.call(data);    // 我叫赵云, 今年22了
obj.myFun.apply(data);   // 我叫赵云, 今年22了
obj.myFun.bind(data)();  // 我叫赵云, 今年22了

上面三个方法除了bind多了个()以外，返回结果都一致；
这说明bind()返回的是一个新的函数，必须调用才会被执行。

对比call, apply, bind 传参的情况

var name = "张三", age = 23;
var obj = {
    name: "李四",
    objAge: this.age,
    myFun: function(from, to) {
        console.log(`我叫${this.name}, 今年${this.age}了, 来自${from}, 去往${to}`);
    }
}

var data = {
  name: "赵云",
  age: 22
}

var xa = "西安", sh = "上海"
obj.myFun.call(data, xa, sh);      // 我叫赵云, 今年22了, 来自西安, 去往上海
obj.myFun.apply(data, [xa, sh]);   // 我叫赵云, 今年22了, 来自西安, 去往上海
obj.myFun.bind(data, xa, sh)();    // 我叫赵云, 今年22了, 来自西安, 去往上海
obj.myFun.bind(data, [xa, sh])();  // 我叫赵云, 今年22了, 来自西安,上海, 去往undefined

从上面的结果可以看出：
call, apply, bind 这三个函数的第一个参数都是this的指向对象；
第二个参数有所差异：
call的参数是直接放进去，可以理解成obj.myFun.call(data, "上海", ..., "string");
apply 的所有参数又必须放到一个数组里面，可以理解成 obj.myFun.apply(data, ["上海", ..., "string"]);
bind除了返回函数以外，传参方式和call相同。
注意：三者的参数不限定是 string 类型，允许是各种类型，包括函数、object 等等

标签：obj,name,myFun,bind,age,JavaScript,call,var,data
来源： https://www.cnblogs.com/operate/p/15928680.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript 中 call()、applay()、bind()的用法