美文网首页前端面试
js手动实现new方法

js手动实现new方法

作者: 奔跑的丸子129 | 来源:发表于2019-02-14 14:56 被阅读271次

要自己实现一个new功能,实现要知道new操作符都干了些什么,其实总的来说就四步:
1.创建一个空对象
2.链接到原型
3.绑定this值
4.返回新对象
知道了这些步骤,我们就可以自己模拟实现new方法了

function create(){
  //创建一个空对象
  let obj = new Object();
  //获取构造函数
  let Constructor = [].shift.call(arguments);
  //链接到原型
  obj.__proto__ = Constructor.prototype;
  //绑定this值
  let result = Constructor.apply(obj,arguments);//使用apply,将构造函数中的this指向新对象,这样新对象就可以访问构造函数中的属性和方法
  //返回新对象
  return typeof result === "object" ? result : obj;//如果返回值是一个对象就返回该对象,否则返回构造函数的一个实例对象
}

接下来测试下:

function People(name,age){
  this.name = name;
  this.age = age;
}
//通过new创建构造实例
let people1 = new People('Jack',20);
console.log(people1.name) //Jack
console.log(people1.age) //20

//通过create方法创造实例
let people2 = create(People,'Rose',18);//调用自定义create实现new
console.log(people2.name) //Rose
console.log(people2.age) //18

经测试这个create方法是合理的。
本文参考:https://blog.csdn.net/liwenfei123/article/details/80580883
https://blog.csdn.net/LL18781132750/article/details/81111634

相关文章

  • js手动实现new方法

    要自己实现一个new功能,实现要知道new操作符都干了些什么,其实总的来说就四步:1.创建一个空对象2.链接到原型...

  • js手动实现new

    1,创建一个空对象2,链接到构造函数的原型3,绑定this到该对象4,返回新对象 使用Object.create简化写法

  • 手动实现new方法,call

    面试中经常会被问到,new方法实现的原理,你能不能实现一个,在这个框架泛滥的年代,我还是决定沉下心来,自己在把基础...

  • 手写Promise

    基本实现new Promise 和 then /catch方法 Promise.js test.js测试 调用手...

  • 原生JS实现new方法

    Javascript中的new操作符实际上做了以下4件事情: 创建一个新的空对象 链接新创建的对象和构造函数的原型...

  • JS手动实现一个new操作

    要手动实现一个 new 操作符,首先要知道 new 操作符都做了什么事,即构造函数的内部原理:1.创建一个新对象;...

  • 2021-03-04

    js 判断执行顺序 手动编写new方法 为什么输出函数 首先进行变量提升b,然后执行自定义函数,里面的b = 20...

  • 【call apply bind】源码实现

    call方法的实现 apply方法实现 bind方法实现 new方法实现 reduce实现

  • js实现new

    new一个函数时发生了什么? 创建一个新的对象将构造函数的原型复制给新对象(this就指向了新对象)执行构造函数中...

  • 面试官问:能否模拟实现JS的call和apply方法

    之前写过两篇《面试官问:能否模拟实现JS的new操作符》和《面试官问:能否模拟实现JS的bind方法》 其中模拟b...

网友评论

    本文标题:js手动实现new方法

    本文链接:https://www.haomeiwen.com/subject/vqdeeqtx.html