`

ECMAScript原型模型

 
阅读更多

1.prototype(原型):创建每一个函数都有拥有一个prototype属性,这个属性是一个 指针 ,指向一个 对象 ,而这个 对象 的用途是包含可以 由特定类型的所有实例共享的属性和方法 。换句话说: prototype就是通过调用构造函数而创建的那个对象实例的原型对象。 使用原型的好处在于可以让 所有实例共享 它所包含的 属性和方法 (共享原型对象所有属性和方法)。

例子:

function Person(){}//创建空的构造函数
var per1=new Person();//创建一个Person实例
var per2=new Person();//创建一个Person实例




 2.ECMAScript原型对象

只要创建一个函数,就会根据一组特定的规则为该函数创建一个protoype属性,这个属性指向函数的原型对象。 在默认情况下,所有原型对象都会自动获得一个constuctor(构造函数)函数 ,这个属性包含一个指 向prototype属性所在函数的指针 。以上例来讲,Person.prototpye.contructor指向Person。通过此构造函数,我们还可以继续添为原型对象添加属性。

在创建自定义构造函数之后,其原型对象默认只会取得constructor属性;至于其他方法则从Object继承而来。当调用构造函数创建一个新的实例后,该实例内部将包含一个指针(内部属性),指向构造函数的原型对象。在很多内部实现中,这个内部属性的名字是_proto_,而且可以访问到(Firefox,Safari、Chrome、Actionscript),而其他的实现这个对象则完全不可见。需要明确一点是:这个连接存在于实例与构造函数的原型对象之间,而不是实例与构造函数之间。

原型对象最初只包含constructor属性,二该属性也是共享属性,一次可以通过对象访问实例。(如下图:最初情况)

原型最初




图中展示了Person构造函数、Person 的原型对象以及Person现有两个实例之间的关系。此时,Person.prototype指向了原型对象,而Person.prototype.constructor又指回了Person。per1和per2都包含一个内部属性该属性仅仅指向了Person.prototype,换句话说它们与构造函数没有直接关系。

function Person(){}//创建空的构造函数
//通过prototype添加属性,可以实现为所有实例共享属性和方法
Person.prototype.name="张三";//Person函数拥有一个prototype属性
Person.prototype.age=29;
Person.prototype.job="软件工程师";
Person.prototype.sayName=fucntion(){
       alert(this.name);
};

var per1=new Person();//创建一个Person实例
per1.sayName();//"张三"
var per2=new Person();//创建一个Person实例
per2.sayName();//"张三"
alert(per1.sayName==per2.sayName)//true,说明调用的是同一个函数
 

下图是添加了额外属性之后关系图:

原型添加属性

2.可以通过对象实例访问保存在原型中的值,但是不能通过对象实例重写原型中的值。 如果在实例对象中添加一个与原型对象中相同名称的属性,那么实例对象取到值将是对实例对象的属性值。

function Person(){}//创建空的构造函数
//通过prototype添加属性,可以实现为所有实例共享属性和方法
Person.prototype.name="张三";//Person函数拥有一个prototype属性
Person.prototype.age=29;
Person.prototype.job="软件工程师";
Person.prototype.sayName=fucntion(){
       alert(this.name);
};

var per1=new Person();//创建一个Person实例
per1.name="李四";//实例对象创建一个与原型相同名称的属性
per1.sayName();//"李四"
var per2=new Person();//创建一个Person实例
per2.sayName();//"张三"
alert(per1.sayName==per2.sayName)//true,说明调用的是同一个函数








 说明实例对象的name属性屏蔽了原型对象的name的值。可以使用delete操作符删除实例对象的属性

function Person(){}//创建空的构造函数
//通过prototype添加属性,可以实现为所有实例共享属性和方法
Person.prototype.name="张三";//Person函数拥有一个prototype属性
Person.prototype.age=29;
Person.prototype.job="软件工程师";
Person.prototype.sayName=fucntion(){
       alert(this.name);
};

var per1=new Person();//创建一个Person实例
per1.name="李四";//实例对象创建一个与原型相同名称的属性
per1.sayName();//"李四"
delete pre1.name;//删除实例对象的name属性
per1.sayName();//"张三"
var per2=new Person();//创建一个Person实例
per2.sayName();//"张三"
alert(per1.sayName==per2.sayName)//true,说明调用的是同一个函数








 

3.从上述代码观察,可以得出以下结论:

每当代码读取某个实例对象的属性时,都会执行一次搜索,目标是具有给定名字的属性(或者方法)。搜索首先从实例对象本身开始,如果发现属性(或者方法)存在,则返回对应的值;如果不存在则会搜索原型对象的属性(或者方法),如果存在则返回值。这也是多个对象实例共享原型对象所保存的属性和方法的基本原理

4.使用hasOwnProperty()方法可以检测一个属性是存在于实例对象中,还是存在于原型对象中。此方法继承自Object,只在给定属性存在于对象实例中时,才返回true。

function Person(){}//创建空的构造函数
//通过prototype添加属性,可以实现为所有实例共享属性和方法
Person.prototype.name="张三";//Person函数拥有一个prototype属性
Person.prototype.age=29;
Person.prototype.job="软件工程师";
Person.prototype.sayName=fucntion(){
       alert(this.name);
};

var per1=new Person();//创建一个Person实例
per1.name="李四";//实例对象创建一个与原型相同名称的属性
per1.sayName();//"李四"
alert(per1.hasOwnProperty("name"));//true
var per2=new Person();//创建一个Person实例
per2.sayName();//"张三"
alert(per2.hasOwnProperty("name"));//false
alert(per1.sayName==per2.sayName)//true,说明调用的是同一个函数
 


分享到:
评论

相关推荐

    ECMAScript概述

    5. **内部属性**:ECMAScript规范定义了一些内部属性,如`[[Prototype]]`(表示对象的原型)、`[[Value]]`(表示数据属性的值)等,这些都是实现JavaScript引擎的细节,对开发者来说通常是透明的。 6. **执行环境**...

    ECMASCRIPT 6介绍

    ECMAScript是由ECMA国际标准化组织制定的标准化脚本语言规范,它定义了JavaScript这门语言的核心语法、类型、对象、原型、继承和内建对象等基础功能。然而,ECMAScript并不涉及HTML、CSS或者Web API等内容,这些属于...

    besen-master_delphi_inchknf_ECMAScript_

    要实现ECMAScript的原型链,可以使用Delphi的类(class)和接口(interface)来模拟。类可以作为实例的模板,而接口可以用于实现多继承。 对于严格模式,虽然Pascal语言本身没有直接对应的概念,但可以通过在编译...

    ECMAScript规范-第三版_中文版.

    11. **BOM与DOM**:虽然不是ECMAScript规范的一部分,但在浏览器环境中,ES3通常与浏览器对象模型(BOM)和文档对象模型(DOM)一起使用,实现页面交互和元素操作。 ECMAScript 3的影响力深远,它的很多特性在后续...

    Understanding ECMAScript 6 The Definitive Guide for JavaScript Developers pdf 0分

    5. 继承(Inheritance):ES6通过class关键字进一步扩展了JavaScript的原型继承模型,引入了更传统的面向对象编程继承机制。这使得开发者能够更自然地实现类之间的继承关系。 6. 异步编程(Asynchronous ...

    深入浅出JavaScript对象模型

    根据ECMA262规范,ECMAScript被定义为一种基于对象的语言而非传统的面向对象语言。这意味着在JavaScript中,对象被视为存储数据的一种大型数组形式,其中每个对象都有一个属性列表,包含该对象的所有属性...

    【第九章】JavaScript【ECMAScript语法基础】

    JavaScript是非阻塞的事件驱动模型,主要通过回调函数、Promise和async/await进行异步操作。Promise解决了回调地狱问题,async/await则提供了更清晰的异步编程语法。 九、模块化 ES6引入了模块系统,使用`import`和...

    Javascript中获取对象的原型对象的方法小结

    _和constructor属性提供了获取原型对象的途径,但是这两个属性在JavaScript严格模式下并不是标准的,使用它们可能会导致代码在未来的JavaScript版本中出现问题,特别是如果JavaScript采用类和基于类的继承模型的话。...

    理解javascript中的原型和原型链

    JavaScript 是一种基于原型的语言,它使用一种不同于传统类继承模型的原型继承机制来实现对象之间的继承。在 JavaScript 中,几乎所有的数据类型都是对象,包括基本类型如数字、字符串等,它们也可以通过包装器对象...

    JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

    JavaScript是一种解释执行的脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型,它遵循ECMAScript标准。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,主要用来给...

    JavaScript

    - **原型继承**:ECMAScript 使用基于原型的继承模型,而不是传统的类继承。 3. **软件许可** - **许可证**:ECMAScript 标准中的软件受到 BSD 许可证的保护。 - **第三方权利**:软件可能受到第三方权利(如...

    JavaScript_一个现代模型图形可视化器和调试器.zip

    3. **原型继承**:JavaScript使用原型链实现对象的继承,每个对象都有一个内部属性[[Prototype]],可以通过__proto__属性或Object.getPrototypeOf方法访问。 4. **函数是第一级公民**:函数在JavaScript中可以作为值...

    浅谈javascript原型链与继承

    根据ECMAScript标准,null没有原型,并作为这个原型链的最后一个环节。这种原型对象的链接结构称为“原型链”。使用原型链,一个对象可以继承其原型对象的属性和方法。 **原型链的几个关键点如下:** 1. `Object....

    JavaScript教程--从入门到精通

    JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。...它最初由网景公司(Netscape)的Brendan Eich设计,是一种动态...完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,字节顺序记号。

    JavaScript教程

    JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。...它最初由网景公司(Netscape)的Brendan Eich设计,是一种动态...完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,字节顺序记号。

    js入门文档

    JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。...完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,字节顺序记号。此文档可快速帮助初学者使用javascript进入开发

Global site tag (gtag.js) - Google Analytics