js中的call()、apply()和bind()方法的区别
call(thisObj,param1,param2....)方法:调用一个对象的方法,用另外的对象去替换当前对象。
下面给出一个例子:
function add(a,b){
return a+b;
}
function sub(a,b){
return a-b;
}
add.call(sub,3,2)
当执行以上代码时,输出的结果为5。执行add.call(sub,3,2)==add(3,2);相当于用add来替换sub;其实每一个函数也是一个对象,它是Function的实例对象。
再写一个改变函数执行上下文的例子:
function Animal(){
this.name='Animal';
this.sayName=function(){
console.log(this.name);
}
}
function dog(){
this.name='dog';
}
var animal=new Animal();
var dog=new Dog();
animal.sayName.call(dog);}
以上代码相当于把animal对象里的sayName方法放到了dog对象上执行,其执行环境改为dog,故sayName方法里的this指向当前的dog对象,所以this.name为dog.
改变当前this的指向,this指向当前的thisObj对象。
b\ 实现继承
实例: function Animal(name){
this.name=name;
this.sayWord=function(){
console.log(this.name);
}}
function Dog(name){
Animal.call(this,name)
}
var dog=new Dog('i am a big dog');
dog.sayName();
输出结果为 i am a big dog;可是Dog构造函数里并没有sayName方法,这里为什么可以调用呢,其实呢Animal.call(this,name)相当于用Animal对象来替换this对象,那么构造函数里就有Animal对象的属性和方法了。故其生成的实例对象dog可以使用这些属性和方法,但是有一点要注意的是当前的this是指向调用该方法的dog对象。
c\实现多重继承
function Animal(name){
this.name=name;
this.sayWord=function(){
console.log(this.name);
}}
function Human(){
this.sayName=function(){
console.log('hello human')
}
}
function Dog(name){
Animal.call(this,name)
Human.call(this)
}
var dog=new Dog('i am a big dog');
dog.sayName();
dog.sayWord();
通过使用多次的call()可以实现多重继承,继承相关的属性和方法。
以上呢是关于call()方法的一些应用,而apply()方法呢与call()类似,只是apply()方法接受的第二个参数是数组,而call是参数列表形式。其他的没有什么区别。用法与call()方法类似。
下面重点说一下bind()方法,这是js新增的一个方法,其作用与call和apply方法一样,传递参数与call方法一样,唯一的不同的是使用call()和apply()方法是直接调用并返回结果,而bind()方法返回的是一个函数;需进一步调用。例子如下:
var obj1={
name:'chen',
age:18,
say:function(name,age){
console.log(this.name+" "+this.age)
}
}
var obj2={
name:'ze',
age:12
}
obj1.say.call(obj2);
obj1.say.apply(obj2);
obj1.say.bind(obj2);
上面执行结果为
ze 12
ze 12
function (name,age){
console.log(this.name+" "+this.age)
}
可以看出bind()方法返回的是一个函数,需进一步调用才能返回相应的结果。
js中的call()、apply()和bind()方法的区别的更多相关文章
- js中call,apply,bind方法的用法
call .apply.和bind 以上这三个方法都是js function函数当中自带的方法,用来改变当前函数this的指向. call()方法 语法格式: fun.call(thisArg[,ar ...
- Javascript中call,apply,bind方法的详解与总结
在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...
- js中call、apply、bind的用法
原文链接:http://www.cnblogs.com/xljzlw/p/3775162.html var zlw = { name: "zlw", sayHello: funct ...
- js中 call() ,apply(),bing()方法三者的用法和区别
面试中经常会被问到的,或者做笔试题的时候也会有这样的问题,所以今天专门对这个问题做个总结: 先看个例子: var age = '19' var myObj = { name:'小赖', myAge:t ...
- js中call、apply、bind到底有什么区别?bind返回的方法还能修改this指向吗?
壹 ❀ 引 同事最近在看angularjs源码,被源码中各种bind,apply弄的晕头转向:于是他问我,你知道apply,call与bind的区别吗?我说apply与call是函数应用,指定thi ...
- js中call、apply、bind那些事
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...
- js中call、apply和bind的区别
在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢.在说区别之前还是先总结一下三者的相似之处:1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对 ...
- JavaScript中的call、apply、bind方法的区别
在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以我们需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这 ...
- js中call、apply、bind那些事2
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如… 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...
随机推荐
- [html5] 学习笔记-响应式布局
1.响应式布局介绍 响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是每一个终端做一个特定的版本.这个概念是为了兼容移动互联网浏览而诞生的,其目的是为用户提供 ...
- c#入门系列——番外篇:vs的安装与使用
vs的安装 1.安装条件 vs全称visual studio 它是一个开发平台,不仅可以用于c#开发,别的也可以.安装vs前,首先需要一个安装包.安装包可以在网上下载.没有购买版权的 ...
- matlab中hold指令、figure指令及subplot指令的使用
一.hold指令使用 正常情况下,plot指令显示figure时,以前的数据丢失了.使用hold on指令后,此后添加的一系列plot曲线将叠加在前一个图上当使用hold off后,恢复为默认状况,p ...
- Java TreeSet集合排序 && 定义一个类实现Comparator接口,覆盖compare方法 && 按照字符串长度排序
package TreeSetTest; import java.util.Iterator; import java.util.TreeSet; import javax.management.Ru ...
- &与&& C语言
&是一个位运算符,就是将两个二进制的数逐位相与,就是都是1才是1,只要有一个为0则为0,结果是相与之后的结果.&&是一个逻辑运算符,就是判断两个表达式的真假性,只有两个表达式同 ...
- php编译安装
php编译安装含mcrypt扩展 开始前准备 1.php源码下载 这里用的是php5.6.22版本 wget -c http://cn2.php.net/get/php-5.6.22.tar.gz/f ...
- 【转载】简析TCP的三次握手与四次分手
最近在补习HTTP协议相关知识点,看到这篇讲得不错,所以转载收藏一下,同时也分享给大家.原文地址:http://www.jellythink.com/archives/705,版权归原作者所有. TC ...
- Unity3d的序列帧动画
马上这星期就要过去了,为了完成每星期写一篇博客的目标,熬夜也要写完. 最近项目中用到了很多序列帧动画,之前看教程也接触过序列帧动画,但当时没用到,就没仔细研究,这次就借着这个机会好好总结一下序列帧动画 ...
- 了解 : angular $rootScope 在 ui-view
在view 的element 可以直接调用 <p>{{$stateParams.xx}}</p> 要让xx有资料必须注入 app.run["$rootScope&qu ...
- 了解 : 怎么处理jobbox status drop down list roll back
that.onStatusEnumChange = function (toStatus) { //设计理念是当completed 和 rejected 的状态下,是无法换状态 if (toStatu ...