new,call,apply,bind方法的实现原理
2020/3/4 5:01:14
本文主要是介绍new,call,apply,bind方法的实现原理,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
javascript中new,call,apply,bind等方法是我们经常要使用到,在伪数组转数组、函数传参、继承等场景中,都离不开他们。这里就不具体讨论他们的使用方法,我们将研究他们的实现方式,重写属于我们自己的方法,让大家重新认识他们的实现过程,使我们在开发中知其然,知其所以然!
new的实现
我们用new实例化一个构造函数,生成一个实例对象,而new到底做了什么呢,主要分为以下五步:
- 1: 获取构造函数
- 2:创建一个新对象;
- 3:将函数的作用域赋给新对象(这里实际上就是生产了一个新的上下文)
- 4:执行函数中的代码(为新对象添加属性、方法)
- 5:返回值,无返回值或者返回一个非对象值时,则将创建的新对象返回,否则会将返回值作为新对象返回。(也就是说一定会返回一个对象回来,这一步可以从下面的代码得结论)
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: 返回的值必须为对象 }
- MyNew方法校验
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的实现
call方法的实现主要有以下三步,比如 fn.call(obj, a, b)
:
- 1: 把调用函数fn的上下文指向obj
- 2: 形参a,b等是以逗号分隔传进去
- 3: 执行函数fn,并返回结果
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 // 返回结果 }
- myCall方法校验
// 浏览器环境下 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的实现
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 }
- apply方法校验
// 浏览器环境下 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方法实现
bind方法和call、apply方法的差别是,他们都改变了上下文,但是bind没有立即执行函数。
// bind 原理 Function.prototype.Mybind = function (context) { let _me = this return function () { return _me.apply(context) } }
- bind方法校验
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
好了,介绍完了,如果觉得对你有帮助,点个赞哈,嘿嘿!
参考文章来源:
这篇关于new,call,apply,bind方法的实现原理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程