美文网首页
JS重要概念之原型与原型链

JS重要概念之原型与原型链

作者: 张先觉 | 来源:发表于2020-11-16 10:55 被阅读0次

#Prototype原型对象

原型对象Function.prototype,具备以下特点:

  • 原型对象prototype是构造函数的一个属性。本质上,也是一个对象。
  • 所有被构造函数构造出来的实例对象都能继承原型对象上面的属性和方法。所以,当我们在写构造函数的时候,一般会将固定的属性和方法写到原型对象prototype之上,从而,避免代码的冗余。
// 不用传参数的固定属性
Person.prototype = {
    book: "《庄子喃哗》",
    author: "南怀瑾",
};
function Person(opt) {
    this.name = opt.name;
    this.age = opt.age;
    this.notice = function () {
        console.log(`${this.age}岁的${this.name}正在阅读${this.author}的${this.book}`);
    };
}

var Tom = new Person({
    name: "张三",
    age: 8,
});
Tom.notice();  // 打印结果:8岁的张三正在阅读南怀瑾的《庄子喃哗》

# __proto__属性实例化对象属性

__Proto__属性,属于每一个实例对象,而不是某一个构造函数。简单说,JS引擎为了方便实例对象访问构造函数当中的prototype属性,于是,在构造函数生成对象的时候,隐式地生成__proto__属性指向构造函数的Prototype属性。

例如:var obj = new Object(); console.log(obj.__proto__);
__~~__:表示这一属性是JS引擎内置属性,不要轻易修改。

  • __proto__属性生成原理如下:
Person.prototype = {
    book: "《庄子喃哗》",
    author: "南怀瑾",
};
function Person(opt) {
    // 隐式创建
    // var this = {
    //     __proto__: Person.prototype;
    // }

    this.name = opt.name;

    // return this;
}

var Tom = new Person({ name: "张三" });

// 修改__proto__指向
Tom.__proto__ = { book: "《孟子》" };

console.log(Tom.__proto__.book); // 打印结果:《孟子》
console.log(Tom.book); // 打印结果:《孟子》
console.log(Person.prototype.book); // 打印结果:《庄子喃哗》

#construct构造器

construct构造器是构造函数prototype对象的属性,默认指向构造函数。

例如:var obj = new Object(); console.log(Object.prototype.constructor === Object)

Book.prototype.name = "西游记";
function Book() {}

var book1 = new Book();
console.log(book1.name); // 打印结果:西游记

Book.prototype.name = "水浒传";
console.log(book1.name); // 打印结果:水浒传

Book.prototype = {
    name: "石头记",
};
console.log(book1.name); // 打印结果:水浒传

var book2 = new Book();
console.log(book2.name); // 打印结果:石头记

// 生成对象的时候,__proto__属性的指向就已经确定。
// 整个过程如下:
// function Book() {
//     var this = { 
//         __proto__: Book.prototype 
//                     --> Book.prototype.construct 
//                     --> Book
//                     --> Book.prototype
//     }
//     return this;
// }

// 其中,__proto__是对象创建的时候才会重新生成,
// Book.prototype.name = "水浒传",只是修改prototype当中的属性而已,prototype引用地址本身不会变。
// Book.prototype = { name = "石头记" },重写了prototype,内存空间多一份,引用地址也发生了改变。


相关文章

  • JS重要概念之原型与原型链

    #Prototype原型对象 原型对象Function.prototype,具备以下特点:原型对象prototyp...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • web前端面试之js继承与原型链(码动未来)

    web前端面试之js继承与原型链(码动未来) 3.2.1、JavaScript原型,原型链 ? 有什么特点? 每个...

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • 再来看一次JS继承

    原型链继承 理解原型链的概念 用一张图来理解原型链再合适不过了。 总结概括JS红宝书上对原型链的概念:每个函数都有...

  • JS进阶系列

    在JS入门难点解析系列中,我们对JS的一些重要概念,比如:作用域,作用域链,原型,原型链,继承,活动对象,this...

  • JavaScript原型链—prototype chain

    原型链是JS里一个重要的概念,理解原型链之前,我们要了解原型。 原型 mdn:每个对象都有一个内部链接到另一个对象...

  • 2022前端高频面试题

    JS相关 1.原型和原型链是什么 原型和原型链都是来源于对象而服务于对象的概念js中引用类型都是对象,对象就是属性...

  • javaScript原型链

    javaScript原型链概念JavaScript之继承(原型链)数据结构var Person = functio...

  • JS原型链

    1什么是JS原型链? 通过__proto__属性将对象与原型对象进行连接. 1.1 JS原型链的作用? 组成的一个...

网友评论

      本文标题:JS重要概念之原型与原型链

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