JavaScript原型与构造函数笔记

maxmin 发布于2019-08-23 15:18 / 2980人阅读

摘要：属性是在实例被的一瞬间建立的，指向原型对象即等同于访问到的属性只能在学习或调试的环境下使用构造函数可以看成一个规范，并非实际存在的当执行时，首先开辟一个新的地址空间用来创建并存放对象，再使的指向对象并且执行函数。

简述

本文是笔者看完《JavaScript面向对象编程指南》后的一些理解与感悟，仅是对JavaScript原型与多种继承进行思路上的梳理，并非讲解基础知识，适合了解原型和继承，却不够清晰透彻的开发者。
希望各位开发者能够通过阅读这篇文章缕清原型和构造函数的脉络

原型(prototype) 学习原型，你需要了解

实例对象

构造函数

原型对象

观察以下代码

function Person (){
    this.age = 20;
}
Person.prototype.gender = "male";
var tom = new Person();    
tom.name = "tom";
console.log(tom.name); // tom
console.log(tom.age); // 20
console.lot(tom.gender); // male
tom.constructor === Person; // true
tom.__proto__ === Person.prototype; // true

原型陷阱

function Dog(){
    this.tail = true;
}
var benji = new Dog();
var rusty = new Dog();
// 给原型添加方法
Dog.prototype.say = function(){
    return "woof!";
}
benji.say(); // "woof!"
rusty.say(); // "woof!"
benji.constructor === Dog; // true
rusty.constructor === Dog; // true
// 此时，一切正常
Dog.prototype = {
    paws: 4,
    hair: true
}; // 完全覆盖
typeof benji.paws; // "undefined"
benji.say(); // "woof!"
typeof benji.__proto__.say; // "function"
typeof benji.__proto__.paws; // "undefined"
// 原型对象不能访问原型的"新增属性"，但依然通过神秘的连接 __proto__ 与原有原型对象保持联系
// 新增实例
var lucy = new Dog();
lucy.say(); // TypeError: lucy.say is not a function 
lucy.paws; // 4
// 此时 __proto__ 指向了新的原型对象
// 由于constructor是存储在原型对象中的，所以新实例的constructor属性就不能再保持正确了，此时它指向了Object()
lucy.constructor; // function Object(){[native code]}
// 旧实例的constructor还是正确的
benji.constructor;
/* function Dog(){
    this.tail = true;
}*/
// 若想让constructor正确，必须在新的原型对象中设置constructor属性为Dog
Dog.prototype.constructor = Dog;

原型总结

constructor属性在Person.prototype对象中，即原型对象中。

__proto__属性是在 tom(实例) 被 new 的一瞬间建立的，指向原型对象即 Person.prototype

tom.constructor 等同于 tom.__proto__.constructor 访问到的

__proto__属性只能在学习或调试的环境下使用

构造函数可以看成一个规范，并非实际存在的

当var tom = new Person() 执行时，首先开辟一个新的地址空间用来创建并存放tom对象，再使Person的this指向tom对象并且执行Person函数。

不要过分依赖constructor属性，不可控。

云服务器 GPU云服务器 javascript原型构造函数私有构造函数非构造函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101832.html

JavaScript高级程序设计－摘要笔记－3

摘要：如果重设构造函数的原型对象，那么，会切断新的原型对象和任何之前已经存在的构造函数实例之间的联系，它们引用的仍然是最初的原型。说明返回的对象与构造函数或者与构造函数的原型属性没有关系。说明：此摘要笔记系列是我最近看《JavaScript高级程序设计(第3版)》随手所记。里面分条列举了一些我认为重要的、需要记下的、对我有帮助的点，是按照我看的顺序来的。摘要笔记本身没有系统性，没有全面性...

AndroidTraveler 2019-08-22 11:02 评论0 收藏0
JavaScript第九天笔记（原型）

摘要：而原型就是类型对象的一个属性。在中并没有定义函数的原始类型，所以原型可以是任何类型。原型是用于保存对象的共享属性和方法的，原型的属性和方法并不会影响函数本身的属性和放大。原型概述在JavaScript中，函数是一个包含属性和方法的Function类型的对象。而原型（Prototype）就是Function类型对象的一个属性。在函数定义时九包含了prototype属性，他的初始值是...

aervon 2019-08-26 12:14 评论0 收藏0
《javascript高级程序设计》第六章读书笔记之 javascript对象的几种创建方式

摘要：三种使用构造函数创建对象的方法和的作用都是在某个特殊对象的作用域中调用函数。这种方式还支持向构造函数传递参数。叫法上把函数叫做构造函数，其他无区别适用情境可以在特殊的情况下用来为对象创建构造函数。一、工厂模式工厂模式：使用字面量和object构造函数会有很多重复代码，在此基础上改进showImg(https://segmentfault.com/img/bVbmKxb?w=456&...

xiaotianyi 2019-08-23 14:31 评论0 收藏0
《javascript高级程序设计》笔记：原型图解

摘要：不理解没关系，下面会结合图例分析上一篇高级程序设计笔记创建对象下一篇高级程序设计笔记继承参考之原型链的解读三张图搞懂的原型对象与原型链继承与原型链文章直接从原型图解开始的，如果对一些概念不太清除，可以结合后面几节查看 1. 图解原型链 1.1 铁三角关系（重点） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 评论0 收藏0
[学习笔记] JavaScript 原型

今天研究了一下js的原型，把自己的理解写到这里，如有不正确的地方，还望指出，在此先谢过啦~ 什么是原型？原型是一个对象。所有对象都有原型。任何一个对象也都可以成为其他对象的原型。每个原型都有一个 constructor 属性指向其构造函数。怎么访问原型？一个对象的原型被对象内部的 [[Prototype]] 属性所持有。一句话就是，所有对象都有原型，其原型是该对象的内部属性。那么...

beita 2019-08-21 10:32 评论0 收藏0