首页 > 编程语言 > 详细

前端知识体系:JavaScript基础-原型和原型链-new一个对象的详细过程

时间:2019-12-12 17:09:38      阅读:123      评论:0      收藏:0      [点我收藏+]

可以描述 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指向该对象;

  ④ 返回对象。

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

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);

前端知识体系:JavaScript基础-原型和原型链-new一个对象的详细过程

原文:https://www.cnblogs.com/memphis-f/p/12029567.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!