在原生js中会有三个很常见的函数,call,apply,bind

他们的作用就是改变当前函数的this指针,

但是细微来说他们还是有不同的。

1)call,apply都是执行某一函数,发现this有变得时候才使用的(进行时)

2)bind是在函数进行调用之前,就强行给变了this的指向(进行前),它的效果是返回一个函数(只是给变了this指向)

说的很多了,不说了

demo :

    function Foo(name){
this.name=name;
} Foo.prototype.getName=function(){
return this.name;
} function Bar(name,label){
Foo.call(this,name);
this.label=label;
} Bar.prototype.getMylabel=function(){
return this.label;
} var fo=new Foo('一灯');
console.log(fo.getName()); //一灯 var ba=new Bar("是你的?","大家的");
console.log( ba.getMylabel()); //大家的 console.log(ba);//bar{label:大家的,name:是你的?}

明白人都会有个问题,这个ba怎么将name值赋值成功的,因为他没有Foo方法呀?

这就是call的厉害了。慢慢体会其中奥秒,

一个问题怎么把call换成apply???

只需要这样: Foo.call(this,name);要被改变成--->Foo.apply(this,[name]).....多说一句,applay与call的却别就是applay的参数是一个数组,

第二个问题:怎么换成bind呢????

已经说过bind的使用是函数进行前进行操作的,返回一个函数

var setName=Foo.bind(this);

setName(name);

当然也可以写成一句话:Foo.bind(this)(name);表面上来看,好像只是与call多了一个括号,但是含义确实不同,bind是先返回一个函数,然后执行函数,,,,,,

第三个问题:我要怎么输出我的ba中的name呢???

很简单呀:console.log(ba.getName());

嗯,错了,确实错了,ba没有getName()方法呀。

怎么办了,这里

方法不唯一.

第一种方法:

console.log(Foo.prototype.getName.call(ba));

或者  console.log(Foo.prototype.getName.bind(ba)());

console.log(Foo.prototype.getName.apply(ba));

 第二种方法:

Bar.prototype=Object.create(Foo.prototype);

console.log(ba.getName());//是你的?

【Objecrt.create的作用就是将Foo.prototype与Bar.prototype相关联起来】

console.log(ba.getMylable());//error       出错了什么鬼???????

【忘记说了,Object.create()他会出创建一个新对象,这样Bar.prototype就会被替换了,这样就尴尬了,getMylabel()就丢了。。。。。。。】

聪明的孩纸说:那么就这样来:

  Bar.prototype=Object.create(Foo.prototype);
Bar.prototype.getMylabel=function(){
return this.label;
}

一点毛病也没用,很好。

其实能更高雅点,当你翻开你的课本,你就会发现其实,Object.setPrototypeOf(Bar.prototype,Foo.Prototype)即可规避上面的尴尬现象了,

Object.setPrototypeOf(Bar.prototype,Foo.Prototype)会改变前者的一些东西,不会将他抛弃

到这里我已经没什么好说的,只想说,bind函数具有一定的兼容性问题

js的call,apply,bind的使用与区别的更多相关文章

  1. JS 的 call apply bind 方法

    js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[,   [,.argN]]]] ...

  2. JS中call,apply,bind方法的总结

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: ...

  3. 学习前端的菜鸡对JS的call,apply,bind的通俗易懂理解

       call,apply,bind 在JavaScript中,call.apply和bind是Function对象自带的三个方法,都是为了改变函数体内部 this 的指向.            a ...

  4. js: this,call,apply,bind 总结

    对js中的一些基本的很重要的概念做一些总结,对进一步学习js很重. 一.this JavaScript 中的 this 总是指向一个对象,而具体指向那个对象是在运行时基于函数的执行环境动态绑定的,而非 ...

  5. js 中call,apply,bind的区别

    call.apply.bind方法的共同点与区别: apply.call.bind 三者都是用来改变函数的this对象的指向: apply.call.bind 三者都可以利用后续参数传参: bind ...

  6. 原生JS实现call,apply,bind函数

    1. 前言 使用原生JS实现call和apply函数,充分了解其内部原理.call和apply都是为了解决改变this的指向.作用都相同,只是传参的方式不同.除了第一个参数外,call可以接受一个参数 ...

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

    call和apply obj.call(thisObj, arg1, arg2, ...); obj.apply(thisObj, [arg1, arg2, ...]); 两者作用一致,都是把obj( ...

  8. JS之call/apply/bind

    测试代码: var a = 1; var obj = { a = 2; } function test(a){ alert(a); alert(this.a); } 1.test(3); 结果:3,1 ...

  9. js 对call apply bind理解

    请参考 http://www.cnblogs.com/xljzlw/p/3775162.html 1.call和apply的区别:参数类型不同var mtt = { name: "mtt&q ...

  10. js new call apply bind 的 原理

    new new 做了什么事?1. 以 Object.protoype 为原型创建一个新对象 2. 以新对象为 this,执行函数的 [[call]] 3. 如果 [[call]] 的返回值是对象,那么 ...

随机推荐

  1. Win环境下Oracle小数据量数据库的物理备份

    Win环境下Oracle小数据量数据库的物理备份 环境:Windows + Oracle 单实例 数据量:小于20G 重点:需要规划好备份的路径,建议备份文件和数据库文件分别存在不同的存储上. 1.开 ...

  2. Chrome浏览器扩展开发系列之十六:扩展中可用的Chrome浏览器API

    除了Chrome浏览器支持的chrome.* API之外,Chrome浏览器扩展还可以使用Chrome浏览器为Web页面或Chrome app提供的APIs.对于Chrome浏览器2支持的API,还可 ...

  3. CentOS7 下使用YUM安装 MySQL5.7

    于2015年10月19日(美国时间),Oracle公司发布了开源数据库MySQL的最新版本5.7.到现在已有将近3年之久,经过这几年的改进,MySQL5.7性能最高可达前一个版本的3倍,现在官网的最新 ...

  4. 5个为什么(five-whys)

    文章非常好,我认为我们必须实施这一思想. 原文:http://venturehacks.com/articles/five-whys 翻译:http://www.tuicool.com/article ...

  5. java的字符串操作和for循环的使用

    /* "12 0 99 -7 30 4 100 13" 要求对字符串中的数值进行排序.生成一个数值从小到大新字符串. "-7 0 4 12 13 30 99 100&qu ...

  6. MessageBoxButtons.OKCancel的选择事件

    private void 退出ToolStripMenuItem1_Click(object sender, EventArgs e) { DialogResult resault = Message ...

  7. “玲珑杯”ACM比赛 Round #12 (D) 【矩阵快速幂的时间优化】

    //首先,感谢Q巨 题目链接 定义状态向量b[6] b[0]:三面临红色的蓝色三角形个数 b[1]:两面临红色且一面临空的蓝色三角形个数 b[2]:一面临红色且两面临空的蓝色三角形个数 b[3]:三面 ...

  8. Java之异常处理,日期处理

    Java异常处理 异常:异常就是Java程序在运行过程中出现的错误. 异常由来:问题也是现实生活中一个具体事务,也可以通过java 的类的形式进行描述,并封装成对象.其实就是Java对不正常情况进行描 ...

  9. luogu P3373 【模板】线段树 2

    题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.将某区间每一个数乘上x 3.求出某区间每一个数的和 输入输出格式 输入格式: 第一行包含三个整数N.M.P,分别 ...

  10. Carthage的安装和使用

    为什么要使用Carthage CocoaPods是已存在很长时间的Cocoa依赖管理器, 那么为什么要创建Carthage呢? CoaoaPods是一套整体解决方案,我们在Podfile中指定好我们需 ...