js中call()、apply()、bind() 的用法

js中call()、apply()、bind() 的用法

JavaScript 中 call()、apply()、bind() 的用法

例子1

	var name = "张三";
    var age = 16
    var obj = {
      name: "李四",
      objAge: this.age,
      myFun: function () {
        console.log(this.name + "年龄" + this.age)//this指向obj
    	}
	}
       console.log(obj.objAge)//16
       obj.myFun()//李四年龄undefined

例子2

    var nameTwo = "王五"
    function shows() {
      console.log(this.nameTwo)
    }
    shows() //王五

分析this差别：第一个打印里面的 this 指向 obj，第二个全局声明的 shows() 函数 this 是 window ；

1、call()、apply()、bind() 重新定义对象的this指向

	var name = "张三";
    var age = 16
    var obj = {
      name: "李四",
      objAge: this.age,
      myFun: function () {
        console.log(this.name + "年龄" + this.age)//this指向obj
    	}
	}
	var obj1 = {
	   name:"王麻子",
	   age:26	
	}

	obj.myFun.call(obj1)	//王麻子年龄26
	obj.myFun.apply(obj1)	//王麻子年龄26	
	obj.myFun.bind(obj1)()	//王麻子年龄26
VM78:7	王麻子年龄26
VM78:7 	王麻子年龄26
VM78:7 ƒ () {
        console.log(this.name + "年龄" + this.age)//this指向obj
    	}

结论:
bind 方法后面多了个 () 外 ，结果返回都一致！
bind方法返回的是一个函数，必须调用它才会被执行。

2、call()、apply()、bind() 传参

	var name = "张三";
    var age = 16
    var obj = {
      name: "李四",
      objAge: this.age,
      myFun: function (one,two) {
        console.log(this.name + "年龄" + this.age,`从`+one+`去`+two)//this指向obj
    	}
	}
	var obj1 = {
	   name:"王麻子",
	   age:26	
	}

	obj.myFun.call(obj1,"成都","上海")		//王麻子年龄26 从成都去上海
	obj.myFun.apply(obj1,["成都","上海"])	//王麻子年龄26 从成都去上海	
	obj.myFun.bind(obj1,["成都","上海"])()	//王麻子年龄26 从成都,上海去undefined
	obj.myFun.bind(obj1,"成都","上海")()		//王麻子年龄26 从成都去上海

总结：
1、call、bind传参方式相同，参数都是直接放进去用逗号隔开；不同的是bind返回的是一个新的函数，必须调用才会执行。
2、apply传参，所有参数必须放在数组中传进去。
3、参数不限制，可以是任意类型