js中有三个改变this指针的方法,分别是 apply,call,bind。很多人只知道能改变的this,但是具体的适用场景不是太清楚。我也是遇到坑后不断的实践发现了区别。

call ,apply方法:

 function Product(name, price) {
this.name = name;
this.price = price;
} function Food(name, price) {
Product.call(this, name, price);
  
this.category = 'food';
} console.log(new Food('cheese', 5).name);
// expected output: "cheese"

在Food类中,因为使用了call改变类Product的类的this执向。所以这个时候在Product 中this定义的两个私有属性却成了Food类new出来对象的。这种方式实现了类似继承的概念,这种方式叫做call继承。

其中call第一个参数表示的是修改的类的this指向值,后面两个name,price都是做为参数传递到Product中。最后在执行这条语句的时候,会执行一下Product这个类(函数)。也就是call就会执行一下 ‘’.‘’ 符号之前的类或者函数。

apply相对call来说也是执行了一下函数或者类,只是参数传递进行了组装。如果要进行apply修改,第7句话就可以表达为 Prpduct.apply(this,[name,price]); 可以把要传递的参数进行数组化。

bind:

bind是es6中新推出的修改this的方法。但是他和传统的call,apply区别就是函数或者类的this修改后没有执行,而是在程序代码检测时已经对代码的this指向进行了修改。那么有什么用呢?

比如我这个时候需要用DOM2级别的事件绑定 :

document.addEventListener('click',fn);
fn(){
this.name='yangkun'
}
//这里我们给document元素对象添加了一个点击事件方法fn;
var obj={name:'zhansan'};
fn.call(obj);
我们需要的是修改fn中的this,指向是obj中的name.是如果这样做,会有一个问题就是,函数fn已经被执行了!实际上我们绑定的click事件对应的是一个函数返回值(这里没有返回值,实际上点击事件绑定了null),而不是我们希望绑定的方法!

这个时候如果我们使用fn.bind(obj)就没问题了。方法没有执行。

后记:JavaScript早期版本没有类,但是大家发现通过new可以实现类似后台语言的语法方式。自然把进行new 的函数说成类。  js 函数有三态,普通函数,类,对象。这个是ES6之前函数的三态。

apply,call,bind区别的更多相关文章

  1. JS之apply,call,bind区别

    为了加深对基础知识的理解,今天再复习下js中的apply,call,bind的区别和用法.整理笔记的过程也是一个再次学习的过程. apply和call js中的调用apply和call方法可以改变某个 ...

  2. call和apply和bind区别

    call和apply特征一样 都是用来调用函数 立即调用 但是可以在调用函数的同时 通过第一个参数指定函数内部this的指向 call 调用的时候 参数必须以参数列表的形式进行传递 也就是以逗号分隔的 ...

  3. javascript中apply,call,bind区别,bind兼容等问题总结

    1 三者的相似之处: (1).都是用来改变函数的this对象的指向的 (2).都是用第一个参数来做this对象的指向 (3).都可以传参数进去 那么,具体到它们有什么区别呢?请看下面的例子: 两个对象 ...

  4. call(),apply(),bind()区别?

    每个函数都包含两个非继承而来的方法,apply()和call(),这两方法的用途都是在特定的作用域中调用函数,实际上等于设置函数数体内的this对象的值. apply()和call()第一个参数都一样 ...

  5. call、apply、bind 区别

    1.为什么要用 call .apply? 为了 改变方法里面的属性而不去改变原来的方法 function fruits() {} fruits.prototype = { color: "r ...

  6. 数组去重,call、apply、bind之间的区别,this用法总结

    一.数组去重,直接写到Array原型链上. //该方法只能去除相同的数字 不会去判断24和'24'是不同的 所有数字和字符串数字是相同是重复的 Array.prototype.redup=functi ...

  7. JS 中的this指向问题和call、apply、bind的区别

    this的指向问题 一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window. function a(){ console.log(this); //输出函数a中的th ...

  8. call,apply,bind的用法与区别

    1.call/apply/bind方法的来源 首先,在使用call,apply,bind方法时,我们有必要知道这三个方法究竟是来自哪里?为什么可以使用的到这三个方法? call,apply,bind这 ...

  9. call apply bind 区别?

    call apply bind 区别? 例:定义一个计算器,没绑定bind的为公共计算器,call可以调用,绑定bind的为私人计算器,别人调用不了, //ps:用bind绑定的call强制作借用不好 ...

随机推荐

  1. Linux网络编程——浅谈 TCP 三次握手和四次挥手

    一.tcp协议格式 二.三次握手 在 TCP/IP 协议中.TCP 协议提供可靠的连接服务,採用三次握手建立一个连接. 第一次握手:建立连接时,client发送 syn 包(tcp协议中syn位置1. ...

  2. ADS-B显示终端6.8

    更新日志; 本次更新依旧主要注重是BUG修正. 1 改动鼠标移动时地图重绘的BUG 鼠标移动时地图即发生重绘,占用了CPU资源,修正后仅仅当鼠标点击选中对象或拖动对象时地图才会发生重绘.极大程度上节省 ...

  3. LeetCode——Valid Number

    Validate if a given string is numeric. Some examples: "0" => true " 0.1 " =&g ...

  4. oc37--类工厂方法

    // // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject @property int ag ...

  5. 无损压缩算法历史——熵编码是最早出现的,后来才有Lzx这些压缩算法

    Lossless   Entropy type Unary Arithmetic Asymmetric Numeral Systems Golomb Huffman  Adaptive Canonic ...

  6. Bayesian Regression

    Thus we see that there are very close similarities between this Bayesian viewpoint and the conventio ...

  7. 520D

    模拟 很明显应该尽量选最大或最小的数.那么我们维护一个set,再维护一个mp,每次检查是否能选,如果选完这个数上面的东西不悬空就可以选,每次选完都要更新四周-2+2的方块,因为再远就影响不到了 #in ...

  8. 95.Extjs 表单中自定义的验证规则 VTypes

    1 Ext.onReady(function(){ Ext.QuickTips.init(); //重写 (自定义)xtype Ext.apply(Ext.form.VTypes,{ repetiti ...

  9. SpringMVC之DispatcherServlet详解

    SpringMVC是一种基于请求启动的WEB框架,并且使用了前端控制器的设计模式,所有满足[WEB-INF/web.xml]文件中的[url-pattern]的匹配条件的请求,这些满足的请求都会交给这 ...

  10. Colored Sticks(trie)

    http://poj.org/problem?id=2513 题意:给一些木棒,木棒两端图上颜色,将端点颜色相同的木棒连在一起,问是否能连成一条直线. 思路:将两端的颜色看成点,将木棒看成边,判断是否 ...