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来做继承 ...
随机推荐
- WEB安全测试通常要考虑的测试点
1问题:没有被验证的输入测试方法: 数据类型(字符串,整型,实数,等)允许的字符集 最小和最大的长度是否允许空输入参数是否是必须的重复是否允许数值范围特定的值(枚举型)特定的模式(正则表达式) 2问题 ...
- ArcGIS制图表达Representation-制图表达使用须知
ArcGIS制图表达Representation-制图表达使用须知 by 李远祥 前面章节也介绍了一些制图表达的适用范围和场景,如果有觉得需要使用制图表达去完成其工作的话,还需要注意制图表达的一些技术 ...
- view里面的tableview顶部被view的导航栏盖住了的问题
在你要显示的控制器的viewDidLoad中添加代码 self.edgesForExtendedLayout = UIRectEdgeNone; 另外记住tableView要遵循代理cell才能显示. ...
- 浅谈时间复杂度- 算法衡量标准Big O
写在前面: 今天有一场考试,考到了Big-O的知识点,考到了一道原题,原题的答案我记住了,但实际题目有一些改动导致答案有所改动,为此作者决定重新整理一下复杂度相关知识点 Efficiency and ...
- Jenkins在windows上的安装配置
今天是2月14号,所谓西方情人节,下班回来发现,2月14过的比七夕还火热.于是上网百度百科查询了"情人节". 毕竟是中国的百度啊.是这么解释的.我感到很欣慰.过得每一个节日都应该 ...
- SmartRoute之远程接口调用和负载
基于接口的调用远比基于基础消息交互来得更简单和便于维护,特别在业务展现上,接口作为业务表现更适合其便利性.为了让SmartRoute更适合业务应用集成,在新的一年开始SmartRoute集成了远程接口 ...
- Vue2.0源码阅读笔记--双向绑定实现原理
上一篇 文章 了解了Vue.js的生命周期.这篇分析Observe Data过程,了解Vue.js的双向数据绑定实现原理. 一.实现双向绑定的做法 前端MVVM最令人激动的就是双向绑定机制了,实现双向 ...
- Ajax封装函数笔记
Ajax封装函数: function ajax(method, url, data, success) { //打开浏览器 //1.创建一个ajax对象 var xhr = null; try { x ...
- cura-engine学习(1)
cura-engine为开源3D打印软件cura的核心引擎代码,详细介绍参看github主页.现在学习的是一个简单版的https://github.com/repetier/CuraEngine,最新 ...
- VS2012 百度云下载 开发工具
百度云下载地址:链接: http://pan.baidu.com/s/1qWDIDPi密码: 5nr0 ASP.NET MVC4.0+ WebAPI+EasyUI+KnockOutJS快速开发框架 通 ...