js apply、call、bind 用法实践+解析

作用： 改变对象的this指向 ，调用指定对象的属性

 使用方法有两种(参数不一样)：
     1、把目标 obj 作为参数传入，默认获取该 obj 的 this 指向
         
         把 obj 的 this 指向，给我拿来： .call(obj):    	    立即执行，不需要手动执行
         把 obj 的 this 指向，给我拿来： .apply(obj):  		立即执行，不需要手动执行
         把 obj 的 this 指向，给我拿来： .bind(obj)():  	    不立即执行，需要手动执行 加 ()

     2、被借用的 obj ，作为函数调用主体时，需要指定借用了谁的 this (targetObj)

         obj.call(targetObj,[  ...arguments ]):    立即执行，不需要手动执行
         obj.apply(targetObj, [ array ]):          立即执行，不需要手动执行
         obj.bind(targetObj, [ ...arguments ])():  不立即执行，需要手动执行 加 ()

 // 第一种方法 直接调用指定对象的属性
 
 let obj = {
     name: 'obj',
     age: '12',
     say: 'hi'
 }

 let obj1 = {
     run: function () {
         // obj1 并没有声明 this.name this.age this.say 属性
         console.log(`${this.name} 今年 ${this.age} 岁，说 ${this.say}`)
     }
 }
 
 // 主动借用对象(obj1)，作为apply函数调用主体时，默认，把参数(obj)的this属性借给主动调用对象(obj1)
 obj1.run.call(obj) // obj 今年 12 岁，说 hi
 obj1.run.apply(obj) // obj 今年 12 岁，说 hi
 obj1.run.bind(obj)() // obj 今年 12 岁，说 hi


 // 第二种方法 可实现工厂模式
 
 // 定义公共属性
 function Person(name,age,gender) {
     this.name = name,
     this.age = age ,
     this.gender = gender  
 }

 // 包含自身属性与公共属性
 function Ming (name,age,gender,say) {  
     // 自身属性
     this.say = say
     this.run = function() {
         console.log(`${this.name} 今年 ${this.age} 岁，${this.gender} , ${this.say}`)
     }
	
	 // 调用函数，改变this指向，借用Person的属性
     // 被借用对象(Person)，作为apply函数调用主体时，需要指定借用this属性的是谁，
     // 当前借用对象是 Ming ，即 this ，这里如果不声明借用对象，则无法借用，输出undefined
     
     // Person.call(this,...arguments) 
     // Person.bind(this,...arguments)()
     Person.apply(this,[...arguments])
     
	 // 不声明借用对象，借用失败，除了 say ，其它属性并没有定义，输出 undefined
     // Person.apply('',[...arguments]) undefined 今年 undefined 岁，undefined , hello
 } 

 // 借用Person的属性，实例化对象，同时使用公共属性和声明自身属性
 let newMing = new Ming('明',12,'男','hi')
 let newMin = new Ming('敏',14,'女','hello')
 newMing.run() // 明 今年 12 岁，男 , hi
 newMin.run() // 敏 今年 14 岁，女 , hello

/**
区别： call 的第二、第三个参数，用逗号分隔；
apply 的第二个参数，必须是数组；
bind 返回的是一个函数，必须手动调用才执行。
*/