call(),apply()和bind()的详解使用:
obj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);
两者作用一致,都是把obj(即this)绑定到thisObj,这时候thisObj具备了obj的属性和方法。或者说thisObj『继承』了obj的属性和方法。绑定后会立即执行函数。
两者的不同之处:传递参数不同,call已正常参数传递,apply传参数的形式是以数组的形式传递。
bind():把obj绑定到thisObj,这时候thisObj具备了obj的属性和方法。与call和apply不同的是,bind绑定后不会立即执行。obj.bind(thisObj, arg1, arg2, ...);bind()只是起到绑定作用并不执行,只有执行才会触发obj.bind(thisObj, arg1, arg2, ...)();
function add(a,b) {
this.num1 = a;
this.num2 = b;
return num1 + num2;
}
function sub(a,b) {
this.num1 = a;
this.num2 = b;
return num1 - num2;
}
console.log( add(3,5) );//
console.log( sub(5,3) );//
console.log( sub.call(add,5,3) );//把sub()的方法绑定到add()方法上。实现了sub()方法。
console.log( sub.apply(add,[5,3]) );//
console.log( add.call(sub,5,3) );//
console.log( add.apply(sub,[5,3]) );//
在对象中的使用:
var person = {
sex: "boy",
action: function() {
console.log( this.sex+" good good study,day day up!" );
//return this.sex+" good good study,day day up!";
}
}
console.log(person.action);//f() {}
var p1 = person.action;
p1();//undefined good good study,day day up!
p1.call(person);//boy good good study,day day up!
p1.apply(person);//boy good good study,day day up!
//使用call(),apply();被调用的对象的方法能够访问对象的属性,赋给调用者。同样可以传递参数。
var person1 = {
sex: "boy",
action: function(a,b) {
console.log( this.sex+" good good study,day day up!"+"age: "+a+"job: "+b );
//return this.sex+" good good study,day day up!";
}
}
console.log(person1.action);//f() {}
var p1 = person1.action;
p1(23,"IT");//undefined good good study,day day up!age: 23job: IT
p1.call(person1,23,"IT");//boy good good study,day day up!age: 23job: IT
p1.apply(person1,[23,"IT"]);//boy good good study,day day up!age: 23job: IT
利用call()或者apply()方法可对对象等使用其他数据类型的方法;(可以理解为把谁的方法添加到调用的对象上)
var a = {
a: 1,
b: "assassin",
c: 2
}
//console.log(a.slice());//TypeError a.slice is not a function
console.log( Array.prototype.slice.call(a) );//[]
可以扩展到自己的方法中:
var animate = {
name: "animate",
fnAn: function() {
console.log("animate...");
}
}
var pp = {};
animate.fnAn.call(pp);//speak...
animate.fnAn.call(pp);//speaking
通过call和apply,我们可以实现对象继承。
function People() {
this.age = 23;
this.name = "assassin";
}
var people = {};
console.log( People);//ƒ People() {//...}
console.log( people );//{}
//People.call(people);
People.apply(people);
console.log(people);//{age: 23, name: "assassin"}
//同样可以传递参数:
function People1(age,name) {
this.age = age;
this.name = name;
}
var people1 = {};
console.log( People1);//ƒ People(age,name) {//...}
console.log( people1 );//{}
//People.call(people,23,"assassin");
People1.apply(people1,[23,"assassin"]);
console.log(people1);//{age: 23, name: "assassin"}
bind();方法使用详解
function fn1(a,b) {
console.log( a*b );
}
function fn2(a,b) {
console.log( a/b );
}
fn1(6,3);//
fn1.bind(fn2,6,3);//并没有执行
fn1.bind(fn2,6,3)();//
call(),apply()和bind()的详解使用:的更多相关文章
- JS中的call、apply、bind方法详解
bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(co ...
- c/c++ 标准库 bind 函数 详解
标准库 bind 函数 详解 bind函数:接收一个函数名作为参数,生成一个新的函数. auto newCallable = bind(callbale, arg_list); arg_list中的参 ...
- 汇总apply()、call()、bind()用法详解
先看明白下面: 例 1 obj.objAge; // 17 obj.myFun() // 小张年龄 undefined 例 2 shows() // 盲僧 比较一下这两者 this 的差别,第一个打印 ...
- JavaScript 中 apply 、call 的详解
apply 和 call 的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已. 原文作者:林 ...
- [荐]Js apply()和call()方法详解 - http://www.w3cfuns.com/article-5596443-1-1.html
本帖最后由 默默DE人生 于 2013-3-19 13:22 编辑 Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文 ...
- 【巷子】:关于Apply、call、bind的详解
call方法: 语法:call(thisObj,'',''........) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 说明:call方法可以用来代替另一个对象调用一个方法.call方法 ...
- 《Javascript高级程序设计》读书笔记之bind函数详解
为什么需要bind var name = "The Window"; var object = { name: "My Object", getNameFunc ...
- javascript 中的apply()和call()方法详解
1.语法 先来看看JS手册中对call的解释: call 方法 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN]]]]]) ...
- bind函数详解(转)
var name = "The Window"; var object = { name: "My Object", getNameFunc: function ...
随机推荐
- 函数式JS: 原来promise是这样的monad
转载请注明出处: http://hai.li/2017/03/27/prom... 背景 上篇文章 函数式JS: 一种continuation monad推导 得到了一个类似promise的链式调用, ...
- yii2.0中使用jquery
我们都知道 yii 框架是组件式开发的,使用 jquery 也是非常简单的.只需要注册一下就可以使用非常简单的 jquery 代码了! <?php $this->beginBlock('s ...
- NodeJS学习笔记 (11)网络UDP-dgram(ok)
模块概览 dgram模块是对UDP socket的一层封装,相对net模块简单很多,下面看例子. UPD客户端 vs UDP服务端 首先,启动UDP server,监听来自端口33333的请求. se ...
- vue之filter用法
1.全局写法: 全局过滤器必须写在vue实例创建之前. Vue.filter('testfilter', function (value,text) { // 返回处理后的值 return value ...
- poj 3613 Cow Relays(矩阵的图论意义)
题解 用一个矩阵来表示一个图的边的存在性,即矩阵C[i,j]=1表示有一条从i到j的有向边C[i,j]=0表示没有从i到j的边.这个矩阵的k次方后C[i,j]就表示有多少条从i到j恰好经过k条边的路径 ...
- 使用jemdoc制作个人主页
jemdoc官网说明: http://jemdoc.jaboc.net/index.html 作者的个人主页:https://jemnz.com/ 将下载的jemdoc.py文件和需要转化的xxx.j ...
- springboot实现热部署,修改代码不用重启服务
1.引入热部署依赖 <!-- 热部署模块 --> <dependency> <groupId>org.springframework.boot</groupI ...
- zookeeper_相关命令 以及 API
(区分大小写) 启动ZooKeeper服务 进入主目录下的 /bin 文件夹. zkServer.sh start. 需要每个节点运行启动命令 客户端启动 zkCli ...
- Android ImageView设置图片原理(下)
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 写完上一篇后,总认为介绍的知识点不多,仅仅是一种在UI线程解析载入图片.两种在子线程解析,在UI线程 ...
- 大话设计模式C++实现-第15章-抽象工厂模式
一.UML图 二.概念 抽象方法模式(Abstract Factory):提供一个创建一系列相关或互相依赖对象的接口,而无需指定他们详细的类. 三.包括的角色 (1)抽象工厂 (2)详细工厂:包含详细 ...