js笔记——call,apply,bind使用笔记

简介:

call和apply

obj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);

两者作用一致,都是把obj(即this)绑定到thisObj,这时候thisObj具备了obj的属性和方法。或者说thisObj『继承』了obj的属性和方法。绑定后会立即执行函数。

唯一区别是apply接受的是数组参数,call接受的是连续参数。

function add(j, k){
    return j+k;
}

function sub(j, k){
    return j-k;
}

我们在控制台运行:

add(5,3); //8
add.call(sub, 5, 3); //8
add.apply(sub, [5, 3]); //8

sub(5, 3); //2
sub.call(add, 5, 3); //2
sub.apply(add, [5, 3]); //2

调用原生对象的方法

示例:

var a = {0:1, 1:"yjc", length: 2}; 

a.slice(); //TypeError: a.slice is not a function

Array.prototype.slice.call(a);//[1, "yjc"]

对象a类似array,但不具备array的slice等方法。使用call绑定,这时候就可以调用slice方法。

实现继承

通过call和apply,我们可以实现对象继承。示例:

var Parent = function(){
    this.name = "yjc";
    this.age = 22;
}

var child = {};

console.log(child);//Object {} ,空对象

Parent.call(child);

console.log(child); //Object {name: "yjc", age: 22}

以上实现了对象的继承。

bind的使用

obj.bind(thisObj, arg1, arg2, ...);

把obj绑定到thisObj,这时候thisObj具备了obj的属性和方法。与call和apply不同的是,bind绑定后不会立即执行。

同样是add()和sub():

add.bind(sub, 5, 3); //不再返回8
add.bind(sub, 5, 3)(); //8

如果bind的第一个参数是null或者undefined,等于将this绑定到全局对象。

目录
相关文章
|
12天前
|
前端开发 JavaScript
【Web 前端】 js中call、apply、bind有什么区别?
【4月更文挑战第22天】【Web 前端】 js中call、apply、bind有什么区别?
【Web 前端】 js中call、apply、bind有什么区别?
|
13天前
|
JavaScript 前端开发
关于javascript中call(),apply(),bind()的介绍,初步
关于javascript中call(),apply(),bind()的介绍,初步
|
1月前
|
JavaScript
call、apply、bind的使用场景区分(js的问题)
call、apply、bind的使用场景区分(js的问题)
|
1月前
|
JavaScript 前端开发
JavaScript中call()与apply()的作用与区别?
JavaScript中call()与apply()的作用与区别?
24 2
|
2月前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(六)
JavaScript高级笔记-coderwhy版本
74 0
|
2月前
|
JavaScript 前端开发 Java
JavaScript高级笔记-coderwhy版本(一)
JavaScript高级笔记-coderwhy版本
35 0
JavaScript高级笔记-coderwhy版本(一)
|
JavaScript 前端开发
JavaScript深入之bind的模拟实现
JavaScript深入系列第十一篇,通过bind函数的模拟实现,带大家真正了解bind的特性
105 0
JavaScript深入之bind的模拟实现
|
12天前
|
存储 移动开发 JavaScript
学习javascript,前端知识精讲,助力你轻松掌握
学习javascript,前端知识精讲,助力你轻松掌握
|
19天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
13 1
|
27天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习