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之前函数的三态。

原文地址:https://www.cnblogs.com/yangkun90/p/10464572.html

时间: 2024-10-09 03:57:03

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

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

1 三者的相似之处: (1).都是用来改变函数的this对象的指向的 (2).都是用第一个参数来做this对象的指向 (3).都可以传参数进去 那么,具体到它们有什么区别呢?请看下面的例子: 两个对象,一个动物类,一个人类,人类也是可以走的,那么我们可以让人类直接使用动物类的action方法吗?答案当然是可以的. 方法就是通过改变动物类的action方法的指向,让它的指向变为person,如下: 结果如下: 再看另外两种用法: 这是call的方法,最后一个bind是有点特殊的: 这是因为bind

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

一.数组去重,直接写到Array原型链上. 1 //该方法只能去除相同的数字 不会去判断24和'24'是不同的 所有数字和字符串数字是相同是重复的 2 Array.prototype.redup=function(){ 3 var obj={}; 4 for(var i=0;i<this.length;i++){ 5 var val=this[i]; 6 if(obj[val]==this[i]){ //如果发现重复的 7 this[i]=this[this.length-1]; //那就把最后

apply,call,bind的区别

apply和call 在js中,apply,call,bind都是为了改变函数的执行上下文的而存在的,即改变函数内部this的指向. 下面的例子可以说明我们为什么要用apply和call,以及apply和call的区别. function Person(){}; Person.prototype = { name:'John', sayName:function(type){ console.log(this.name + " "+ type); } } var testPerson

apply、call、bind区别、用法

apply和call都是为了改变某个函数运行时的上下文而存在的(就是为了改变函数内部this的指向): 如果使用apply或call方法,那么this指向他们的第一个参数,apply的第二个参数是一个参数数组,call的第二个及其以后的参数都是数组里面的元素,就是说要全部列举出来: 他们的常用用法: 1.数组之间的追加: 2.获取数组中的最大值和最小值,利用他们扩充作用域拥有Math的min和max方法: 由于没有什么对象调用这个方法,所以第一个参数可以写作null或者本身: var  numb

js中call、apply和bind的区别

前言 关于js中call.apply和bind这三者的区别,这应该是一个老生常谈的问题,也是前端面试时经常会遇到的一道题目,因此也抽空把它理一遍. 作用 call.apply和bind都是一个javascript中的方法,他们的共同作用就是改变函数执行时的上下文,即改变函数执行时this的指向.我们来看下面的例子: 1 function Animal(name) { 2 this.name = name; 3 } 4 Animal.prototype.getName = function() {

call,apply,bind的用法与区别

1.call/apply/bind方法的来源 首先,在使用call,apply,bind方法时,我们有必要知道这三个方法究竟是来自哪里?为什么可以使用的到这三个方法? call,apply,bind这三个方法其实都是继承自Function.prototype中的,属于实例方法. 1 console.log(Function.prototype.hasOwnProperty('call')) //true 2 console.log(Function.prototype.hasOwnPropert

js中的call,apply,bind区别

在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:apply . call .bind 三者都是用来改变函数的this对象的指向的:apply . call .bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文(函数的每次调用都会拥有一个特殊值--本次调用的上下文(context)--这就是this关键字的值.):apply . ca

call apply bind 区别

apply call bind 是Function.prototype 下的方法,用于改变函数运行时的上下文,若没有返回值,则返回undefined: 使用apply() 可以继承其他对象的方法 注意:apply()第一个参数是null,在 非严格模式下,第一个参数为 null 或 undefined 时会自动替换为指向全局对象, apply() 第二个参数为数组或类数组  eg: 参数二使用数组字面量 function.apply(this,['eat','bananas']) 或使用数组对象

超容易理解的call()、apply()、bind()的区别

call().apply().bind()是用来改变this的指向的. 一 举个例子 一个叫喵喵的猫喜欢吃鱼,一个叫汪汪的小狗喜欢啃骨头,用代码实现如下: var cat = { name:"喵喵", eatFish:function(param1,param2){ console.log("吃鱼"); console.log("this的指向=>"); console.log(this); console.log(param1,param