JS:call、apply和bind的用法及区别

一、call和apply

1、call和apply都是function.prototype的方法,每一个方法的对象实例 new function() 都会有这两个属性;

2、这两个属性都是针对方法的属性针对方法使用

3、call和apply使用方法相同;

4、call和apply的参数不同;
(1)test.call ( this, param1 , param2 , param3 ) ; // 可以传多个参数
(2)test.apply ( this, paramArray ) ; // 只能传两个参数,第二个一般为数组

二、bind

call和apply会改变this指向,然后执行函数;
bind会改变this指向后,返回一个绑定新this的函数;

三、demo

var name = "aven";
var age = 18;

var obj = {
      name: "ake",
      age: this.age,
      test: function(){
          console.log("name: ", this.name, "age: ", this.age );
  }
};

obj.test(); 
// name: ake  age: undefined
// 因为obj.test() 只会调用本身属性,本身没有age属性,但是有name属性

obj.test.call()
// name:  aven age:  18
// call参数为null或undefined时默认指向window,
// this含有属性 name : "aven", age: 18,所以输出结果变化
var name = "testName";
var age = 18;

var obj = {
      name: "ake",
      age: this.age,
      test: function(gender, home){
          console.log("name: ",this.name,"age:",this.age,"gender:",gender,"home: ", home);
  }
};

var person = {
      name: "aven",
      age: 18
}

obj.test.call(person, "female", "China")  // name:  aven age: 18 gender: female home:  China
obj.test.apply(person, ["female", "China"])  // name:  aven age: 18 gender: female home:  China
obj.test.bind(person, "female", "China")()  // name:  aven age: 18 gender: female home:  China
obj.test.bind(person, ["female", "China"])()  // name:  aven age: 18 gender: ["female", "China"] home:  undefined

obj.test.bind(this, "female", "China")() // name:  testName age: 18 gender: female home:  China
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容