apply,call,bind区别
js中有三个改变this指针的方法,分别是 apply,call,bind。很多人只知道能改变的this,但是具体的适用场景不是太清楚。我也是遇到坑后不断的实践发现了区别。
call ,apply方法:
1 function product(name, price) { 2 this.name = name; 3 this.price = price; 4 } 5 6 function food(name, price) { 7 product.call(this, name, price);
8 this.category = 'food'; 9 } 10 11 console.log(new food('cheese', 5).name); 12 // 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之前函数的三态。
上一篇: js 作用域
下一篇: 这是新的新年祝福吗?收下了!
推荐阅读
-
深入理解jQuery中live与bind方法的区别
-
JavaScript中的call和apply的用途以及区别
-
有关JavaScript中call()和apply() 的一些理解
-
call和apply的区别是什么(apply的用法和搭配)
-
JavaScript中的this,call,apply使用及区别详解
-
js中call()和apply()改变指针问题的讲解
-
js的继承方法小结(prototype、call、apply)(推荐)
-
javascript中call apply 与 bind方法详解
-
jQuery中bind,live,delegate与one方法的用法及区别解析
-
js中的call bind apply简单分析