javascript中new,call,apply,bind等方法是我们经常要使用到,在伪数组转数组、函数传参、继承等场景中,都离不开他们。这里就不具体讨论他们的使用方法,我们将研究他们的实现方式,重写属于我们自己的方法,让大家重新认识他们的实现过程,使我们在开发中知其然,知其所以然!
我们用new实例化一个构造函数,生成一个实例对象,而new到底做了什么呢,主要分为以下五步:
function MyNew() { let Constructor = Array.prototype.shift.call(arguments); // 1:取出构造函数 let obj = {} // 2:执行会创建一个新对象 obj.__proto__ = Constructor.prototype // 3:该对象的原型等于构造函数prototype var result = Constructor.apply(obj, arguments) // 4: 执行函数中的代码 return typeof result === 'object' ? result : obj // 5: 返回的值必须为对象 }
function Man(name, age) { this.name = name this.age = age } var tom = new Man('tom', 20) var mike = MyNew(Man, 'mike', 30) console.log(tom instanceof Man, mike instanceof Man) // true true
call方法的实现主要有以下三步,比如 fn.call(obj, a, b)
:
Function.prototype.myCall = function (context) { context = context ? Object(context) : window context.fn = this // 重置上下文 let args = [...arguments].slice(1) // 截取参数a,b let r = context.fn(...args) // 执行函数 delete context.fn // 删除属性,避免污染 return r // 返回结果 }
// 浏览器环境下 var a = 1, b = 2; var obj ={a: 10, b: 20} function test(key1, key2){ console.log(this[key1] + this[key2]) } test('a', 'b') // 3 test.myCall(obj, 'a', 'b') // 30
apply方法和call方法大同小异,唯一差别就是,apply传入的参数是数组格式。
// apply 原理 Function.prototype.myApply = function (context) { context = context ? Object(context) : window context.fn = this let args = [...arguments][1] if (!args) { return context.fn() } let r = context.fn(...args) delete context.fn; return r }
// 浏览器环境下 var a = 1, b = 2; var obj ={a: 10, b: 20} function test(key1, key2){ console.log(this[key1] + this[key2]) } test('a', 'b') // 3 test.myCall(obj, ['a', 'b']) // 30 注意这里是传入数组 ['a', 'b']
bind方法和call、apply方法的差别是,他们都改变了上下文,但是bind没有立即执行函数。
// bind 原理 Function.prototype.Mybind = function (context) { let _me = this return function () { return _me.apply(context) } }
var a = 1, b = 2; var obj ={a: 10, b: 20} function test(key1, key2){ console.log(this[key1] + this[key2]) } var fn = test.bind(obj) fn('a', 'b') // 30
好了,介绍完了,如果觉得对你有帮助,点个赞哈,嘿嘿!