可以描述 new一个对象的详细过程,手动实现一个 new操作符

1. new 一个对象的详细过程:(原文地址

首先我们看下new Person输出什么?

var Person = function(name, age) {
this.name = name;
this.age = age;
};
Person.prototype.show = function() {
console.log(this.name, this.age);
};
var p = new Person("bella", 10);
console.log(p);

有属性name, age 和 __proto__

__proto__里面有原型方法show,constructor, __proto__

然后我们再输出构造器Person.prototype:

对比一下,发现p的__proto__的值就是构造函数Person的prototype的属性值。

因此new操作符创建对象可以分为以下四个步骤:

  ① 创建一个空对象;

  ② 链接到原型(将所创建对象的__proto__属性值设为构造函数的prototype属性值);

  ③ 绑定this(构造函数中的this指向新对象并且调用构造函数);

  ④ 返回新对象。

因此上面的过程就可以等同于下面的过程:

var Person = function(name, age) {
this.name = name;
this.age = age;
};
Person.prototype.show = function() {
console.log(this.name, this.age);
};
// var p = new Person("bella", 10);
var p = {};
p.__proto__ = Person.prototype;
Person.call(p, "balle", 10);
console.log(p);

2. 手动实现一个new操作符:(原文地址

要手动实现 new 操作符,就要明白new操作符做了什么事,如 上面 总结的new操作符创建对象的四个步骤。

这样我们就可以实现一个new方法了:

function realizeNew () {
//创建一个新对象
let obj = {};
//获得构造函数
let Con = [].shift.call(arguments);
//链接到原型(给obj这个新生对象的原型指向它的构造函数的原型)
obj.__proto__ = Con.prototype;
//绑定this
let result = Con.apply(obj,arguments);
//确保new出来的是一个对象
return typeof result === "object" ? result : obj
}

[].shift.call(arguments)的作用是将调用realizeNew方法的第一个值拿出来:

我们实现的realizeNew()需要传入的参数是:构造函数 + 属性

首先创建一个新对象,

然后通过 arguments 类数组我们可以知道参数中包含了构造函数以及我们调用create时传入的其他参数,接下来就是要想如何得到其中这个构造函数和其他参数,由于arguments是类数组,没有直接的方法可以供其使用,我们可以有以下两种方法:

  1)Array.form(arguments).shift();转换成数组,使用数组方法shift将第一项弹出

  2)[].shift().call(arguments);通过call()让arguments能够借用shift()方法

绑定this的时候需要注意:

  1)给构造函数传入属性,注意构造函数的this属性;

  2)参数传进Con对obj的属性复制,this要指向obj对象;

  3)在Con内部手动指定函数执行时的this使用call、apply实现

最后需要返回一个对象

测试:

function Person (name,age){
this.name = name;
this.age = age;
this.say = function () {
console.log("I am " + this.name)
}
} //通过new创建构造实例
let person1 = new Person("Curry",18);
console.log(person1.name); //"Curry"
console.log(person1.age); //
person1.say(); //"I am Curry' //通过realize()方法创造实例
let person2 = realizeNew (Person,"Curry",18);
console.log(person2.name); //"Curry"
console.log(person2.age); //
person2.say(); //"I am Curry'

前端知识体系:JavaScript基础-原型和原型链-new一个对象的详细过程,手动实现一个 new操作符的更多相关文章

  1. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  2. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  3. web前端知识体系大全

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  4. web前端知识体系小结(转)

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  5. Web前端知识体系精简

    Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...

  6. 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!

    前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

  7. Web前端知识体系

    看到一篇不错的文章,拿来收藏和分享. 原文:http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由html.css和 javascript三 ...

  8. web前端知识体系大全【欢迎补充】

    大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人 ...

  9. web前端知识体系大全【转载】

    自己总结的web前端知识体系大全[欢迎补充]   1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在 ...

随机推荐

  1. vue element-ui typescript tree报错 === Property 'getCheckedNodes' does not exist on type 'Element | Element[] | Vue | Vue[]'.

    import { Tree } from 'element-ui' const ref = <Tree>this.$refs.tree ref.getCheckedNodes()

  2. 第三坑:jar包编译版本

    这个是之前往was上发应用的时候踩的一个坑,当时我们知道was的jdk版本是1.6,然后我们是用1.7的jdk,编译版本选的是1.6,然后放上去不对,我们以为是编译的问题,然后又下载了1.6的jdk, ...

  3. (转)从0移植uboot (二) _uboot启动流程分析

    ref:https://www.cnblogs.com/xiaojiang1025/p/6496704.html 经过了上一篇的配置,我们已经执行make就可以编译出一个uboot.bin,但这还不够 ...

  4. redis键的排序操作

    命令名称:sort 语法:sort key [BY pattern] [LIMIT offset count] [GET pattern [GET pattern ...]] [ASC|DESC] [ ...

  5. Oracle VIP说明

    本篇文档,描述说明VIP的作用 1.VIP全称 virtual ip 虚拟IP 2.Oracle为啥要搞个VIP 3.两节点RAC,集群单个节点故障关闭后,VIP漂移否继续对外提供服务 一.模拟RAC ...

  6. Spring Boot 多个域名指向同一IP

    一.需求:直接通过域名访问首页(同一应用下,多个首页,包括PC端.手机端首页) 方法:采用多个域名绑定同一IP下同一应用,不同域名对应不同产品(PC.手机端)的方法,在后台通过拦截器判断 reques ...

  7. 我对DES AES RSA的认识

    1.DES(Data Encryption Standard)算法:数据加密标准.是替换和置换细致而复杂的结合体,替换和置换一个接着一个,共循环16次.算法首先将明文分块,每块64位.密钥也是64位, ...

  8. SOLID Principles

    Intention: more understandable, easier to maintain and easier to extend.(通过良好的设计使得代码easy and simple, ...

  9. SOAP-1概述

    简单对象访问协议 SOAP(简单对象访问协议)一般指简单对象访问协议 简单对象访问协议是交换数据的一种协议规范,是一种轻量的.简单的.基于XML(标准通用标记语言下的一个子集)的协议,它被设计成在WE ...

  10. 配置vue 多页面

    安装vue 1. 全局安装 vue-cli环境 npm install --global vue-cli 2. 创建一个基于webpack模板的新项目 vue init webpack my-proj ...