学习JavaScript 中 call()、apply()、bind()

重点： 以 this 为中心，即执行的上下文环境

 

1. JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

• this 的多种指向:

•  1、在对象方法中， this 指向调用它所在方法的对象。

  • var myObject = {
        firstName:"John",
        lastName: "Doe",
        fullName: function () {
            return this;
        }
    }
    myObject.fullName();  
    // 函数作为对象方法调用，会使得 this 的值成为对象本身。

     

•  2、单独使用 this，它指向全局(Global)对象。

  • function myFunction() {
        return this;
    }
    myFunction();   
    // 	函数作为全局对象调用，会使 this 的值成为全局对象。

     

•  3、函数使用中，this 指向函数的所属者。

  • function myFunction(a, b) {
        return a * b;
    }
    myFunction(10, 2);           // myFunction(10, 2) 返回 20
    // 不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。

     

•  4、严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
•  5、在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。
•  6、apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对

 

2. 显式函数绑定this

    在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

			var name = '小王', age = 4;
			var obj = {
				name: '校长',
				objAge: this.age, // this指向会随着contex改变
				myFun: function () {
					console.log('this', this);
					console.log('objAge' ,this.objAge);
					console.log(this.name + '-年龄- ' + this.age);
					return 'this myFun'
				}
			}
			var db1 = {
				name: '德玛',
				age: 966
			}
			
			var db2 = {
				name: '压缩',
				age: 45
			}
			
			console.log(obj); // 此时obj中this指向 全局
			console.log(33, obj.myFun()); // 此时obj中this指向 obj本身
			console.log(28, obj.myFun.call(db1)); // 此时obj中this指向 db1
			console.log(29, obj.myFun.apply(db2)); // 此时obj中this指向 db2

   call() 与 apply() 的区别

         目前只知道：apply() 的第二参数为数组，而call() 可以直接写多个参数

            obj.myFun.call(db1, a,...,x)

            obj.myFun.apply(db2, [a,...,x])

 

3. bind()

     参数和 call() 一样，返回一个方法

bind的应用场景：

    1. 保存函数参数：

         2. 回调函数this丢失问题

                  这也是为什么react的render函数在绑定回调函数的时候，也要使用bind绑定一下this的指向，也是因为同样的问题以及原理。
 

“手抄”  call/apply、bind

Function.prototype.myCall = function (context, ...arr) {
				if(context === null || content === undefined) {
					conten = window
				} else {
					content = Object(content)
				}
				const specialPrototype = Symbol('')
				context[specialPrototype] = this
				let result = context[specialPrototype](...arr)
				delete context[specialPrototype]
				return result
			}
			
			Function.prototype.myApply = function (content) {
				if (content === null || content === undefined) {
					content = window
				} else {
					content = Object(content)
				}
				// 类数组判断
				function isArrayLike(arr) {
					if (arr && typeof arr === 'object'
						&& isFinite(arr.length)
						&& arr.length >= 0
						&& arr.length === Marh.floor(arr.length)
						&& arr.length < Math.pow(2,32)
					) return true
					return false
				}
				const specialPrototype = Symbol('')
				content[specialPrototype] = this
				let args = arguments[1]
				let result
				if (args) {
					if (!Array.isArray(args) && !isArrayLike(args)) {
						throw new TypeError('参数错误')
					} else {
						args = Array.from(args)
						result = content[specialPrototype](...args)
					}
				} else {
					result = content[specialPrototype]()
				}
				delete content[specialPrototype]
				return result
			}

			Function.prototype.myBind = function(objThis, ...params) {
				const thisFn = this
				let fTobind = function(...secondParams) {
					const isNew = this instanceof fTobind
					const contex = isNew ? this : Object(objThis)
					return thisFn.call(contex, ...params, ...secondParams)
				}
				fTobind.prototype = Object.create(thisFn.prototype)
				return fTobind
			}

辅助：拓展运算符（...）、arguments、 类数组、Math.pow等

面试遇到的，and当时一脸懵。。。

继续学习，加油！