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之前函数的三态。
call和apply可以用来重新定义函数的执行环境,也就是this的指向; call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的 换句话说,就是为了改变函数体内部 this 的指向。
call 方法是Function.prototype原型上天生自带的方法,所有的函数都可以调用的。它改变了call方法(Function.prototype原型上的call)的this指向。
首先介绍下call和apply两个方法,这两个方法都是挂载在函数的原型上的,所以所有的函数都可以调用这两个方法。call()方法的作用和 apply() 方法类似,区别就是call()方法接受的是参数列表
call定义:调用一个对象的一个方法,以另一个对象替换当前对象,传递多个参数,apply定义:应用某一对象的一个方法,用另一个对象替换当前对象,apply传递多个参数的时候第二个参数需要传递一个数组
ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已。
这是 JS 原生方法原理探究系列的第一篇文章。本文会介绍如何实现 call、apply 和 bind 方法。关于这几个方法的具体用法,MDN 以及网上的文章已经描述得很清楚,这里不再赘述。
本文将全面的,详细解析call方法的实现原理,并手写出自己的call方法,相信看完本文的小伙伴都能从中有所收获。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!