JavaScript原型与构造函数笔记
栏目: JavaScript · 发布时间: 5年前
内容简介:本文是笔者看完希望各位开发者能够通过阅读这篇文章缕清原型和构造函数的脉络观察以下代码
简述
本文是笔者看完 《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
属性,不可控。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 构造函数、原型、原型链、继承
- 【进阶5-1期】重新认识构造函数、原型和原型链
- 详解js原型,构造函数以及class之间的原型关系
- 构造函数的继承——使用原型对象(prototype)
- 构造函数(constructor)与原型链(prototype)关系
- 《JavaScript面向对象精要》之四:构造函数和原型对象
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Effective JavaScript
David Herman / Addison-Wesley Professional / 2012-12-6 / USD 39.99
"It's uncommon to have a programming language wonk who can speak in such comfortable and friendly language as David does. His walk through the syntax and semantics of JavaScript is both charming and h......一起来看看 《Effective JavaScript》 这本书的介绍吧!
html转js在线工具
html转js在线工具
HSV CMYK 转换工具
HSV CMYK互换工具