JS原型的动态性及实例与原型的关系

今天再读了《JS高程》的第六章,有了些深入的感悟和理解,总结分享一下。

创建对象的方式有很多,有一种是动态原型模式,最实用的是构造函数与原型组合的模式,原型的动态性在这两个模式里都有所体现,我本人的理解是:前者的“动态”是通过一些判断,看方法是否存在来决定是否对原型进行初始化,同时,在构造函数内部对原型的修改会立即体现在所有的实例中,后者的“动态”是主要是说无论是先创建实例还是先修改原型,对原型对象所做的修改都会立即反应在实例中,针对后者来个栗子(栗子1):

function Person(){}
var p = new Person();
Person.prototype.sayHello = function(){
    alert("Hello!");
}
p.sayHello();    //弹出:Hello      

其实,实例与原型之间的关联纽带就是一个定向指针,因此,我感觉构造函数与实例某种程度上是平等关系,只不过构造函数拥有原型指过来的一个指针(constructor)。

到这里,一切都很好理解,偏偏文章接下来有扩展了一点儿内容把我搞迷糊了,直接上码(栗子2):

function Person(){}
Person.prototype = {    constructor : Person,
    name : "Tom",
    age : 29,
    sayName : function(){
         alert(this.name);
    }
}
var p = new Person();
p.sayName();    //弹出:"Tom"

那好,既然上边说了,原型有动态性,那我这样写(栗子3):

function Person(){}
var p = new Person();
Person.prototype = {    constructor : Person,
    name : "Tom",
    age : 29,
    sayName : function(){
         alert(this.name);
    }
}
p.sayName();    //error

按理说,我实例调用了原型上的方法,应该弹出“Tom”啊,事实上却报错:“undefined is not a function”。

其实,这已经不再是原型动态不动态的问题了,而是实例与新、旧原型对象之间的问题。另外原型与实例间关系,我们可以用isPrototypeOf或者instanceof等来判断。

我们都看到了,栗子1与栗子2、3对原型的修改方式是不一样的,栗子1相当于纯粹的给原型这个对象添加了一个方法,而栗子2、3用的是字面量法创建了一个新的原型(相当于新建一个对象),完完全全,彻彻底底地覆盖了原来的原型对象,只不过用一句“constructor:Person;”伪装了一下,仔细的读者或许会发现我在第二段的说明是给"修改"这个词加粗了,栗子1只是“修改”,栗子2、3是“新建覆盖”。

栗子2中创建实例对象时,原来的原型已经被新建的原型覆盖了,因此能够访问到这个方法。而栗子3中,当创建实例时,它的指针指向的还是之前的原型,即便后来又新建了一个原型对象,这个指针依然没变,一次在原来原型上是访问不到这个方法的,故报错。语言的描述显得很干巴巴,我们再来个栗子(栗子4):

function Person(){}
Person.prototype = {
    name : "Tom",
    age : 29,
    sayHello : function(){
        alert("Hello");
    }
}
var proto = Person.prototype;
var p = new Person();
p.syaHello();     //Hello
alert(Person.prototype.isPrototypeOf(proto));    //false
alert(Person.prototype.isPrototypeOf(p));    //true
alert(proto.isPrototypeOf(p));    //true

上述代码非常清晰的告诉我们:proto里保存的始终是原来的原型对象,而alert里的Person.prototype是已经被覆盖了的新的原型对象,p此时访问的也是新的原型对象。

最后来个栗子(栗子5):

function Person(){}
Person.prototype = {
    var proto = Person.prototype;
    var p = new Person();
    name : "Tom",
    age : 29,
    sayHello : function(){
        alert("Hello");
    }
}
p.syaHello();     //error
alert(Person.prototype.isPrototypeOf(proto));    //false
alert(Person.prototype.isPrototypeOf(p));    //false
alert(proto.isPrototypeOf(p));    //true

上述代码非常清晰的告诉我们:proto里保存的依然是原来的原型对象,p此时访问的还是原来的原型对象。

综上,个人感觉这两部分的内容不应该放在一块儿说,很容易让人迷糊,其次,看问题,一定能进得去、跳的出,遇到死角,站在更高的角度看一下,就会有新的发现,自己在看这块儿时一直拐不过来弯儿,分明前边说了有动态性,后边确没有体现,并且还相违背,这分明不合理,后来才发现,这其实是两码事儿,应该分开来理解。

(另:这是JS里比较重要的模块儿,本人才学疏浅、难免疏漏,欢迎指正,共同进步^_^)

时间: 2024-10-11 17:10:25

JS原型的动态性及实例与原型的关系的相关文章

读书笔记--对象、实例、原型、继承

创建对象的设计模式 工厂模式 抽象了创建具体对象的过程,用函数封装以特定接口创建对象的细节 解决了创建多个相似对象的问题,没有解决对象识别的问题 function createPerson(name,age){ var obj = new Object(); obj.name = name; obj.age = age; obj.sayName = function(){ alert(this.name) } return obj; } var person = createPerson('aa

JS面向对象篇二、什么是原型?原型对象与实例对象、构造函数的关系及相关方法

本文内容: 1.构造函数.原型对象与实例对象之间的关系: 2.isPrototypeOf()和Object.getPrototypeOf(); 3.实例对象上与原型对象上同名的属性处理: 4.hasOwnProperty()方法和in操作符判断属性来自实例对象本身还是它的原型对象: 5.for-in.Object.keys()和Object.getOwnPropertyNames()方法获取实例对象或者原型对象上的属性: 6.需注意的特殊问题 构造函数.原型对象与实例对象 function Pe

浅谈JS中的构造函数、原型对象(prototype)、实例中的属性/方法之间的关系

原文链接:https://segmentfault.com/a/1190000016951069 构造函数:函数中的一种,通过关键字new可以创建其实例.为了便于区分,通常首字母大写:原型对象:一种特殊的对象,构造函数创建时自动生成:与构造函数形成一一对应,如同人和影子般的关系:实例:通过构造函数实例出来的对象: 在定义构造函数时,在其内部(“{“和”}”)进行定义属性和方法.当我们通过关键字new,对构造函数进行实例化的时候.实例会对构造函数的这些属性进行拷贝出一份副本,然后将其归属为当前实例

面向对象JS基础讲解,工厂模式、构造函数模式、原型模式、混合模式、动态原型模式

什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现. 工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function createBlog(

Js中的对象、构造函数、原型、原型链及继承

1.对象 在传统的面向过程的程序设计中,会造成函数或变量的冗余.而JS中对象的目的是将所有的具有相同属性或行为的代码整合到一起,形成一个集合,这样就会方便我们管理,例如: var person1={    name:"tan",    age:26,    showMessage:function(){        alert("name:"+this.name);    }};person.showMessage();//输出name:tan 以上的例子将nam

原型的动态性

这是对<高级3>的P156页,原型的动态性的理解 function Person(){ } var oldproto = Person.prototype; var friend = new Person(); Person.prototype = { constructor: Person, name: "Nicholas", age: 29, job: "Software Engineer", sayName: function () { alert

js:对象的创建(基于组合和动态原型)

基于原型的创建虽然可以有效地完成封装,但是依然存在如下问题: 1.无法通过构造函数来设置属性值 2.当属性中有引用类型变量时,可能存在变量值重复 function Person(){ } Person.prototype = { constructor:Person, name:"Leon", age:30, friends:["Ada","Chris"], say:function(){ alert(this.name+"["

《JS权威指南学习总结--6.1原型》

内容要点: 一.每一个JS对象(null除外)都和另一个对象相关联."另一个"对象就是我们熟知的原型,每一个对象都从原型继承属性. 二.所有通过对象直接量创建的对象都具有同一个原型对象,并可以通过JS代码Object.prototype获得对原型对象的引用. 三.通过关键字new和构造函数调用创建的对象的原型就是构造函数的prototpe属性的值. 四.使用{}创建对象一样,通过new Object()创建的对象也继承自Object.prototype. 同样,通过new Array(

原型的实时局部修改与全部重写的区别(原型的动态性)

1 //代码1-原型原理: 2 function Student(){ 3 //创建了一个空的构造函数 4 } 5 6 //注意:创建了函数Student的同时Student.prototype原型对象就立即产生了 7 8 var person1 = new Student();//实例person1默认都会从Student.prototype 继承属性与方法 9 var person2 = new Student();//实例person2默认都会从Student.prototype 继承属性