JavaScript面向对象程序设计三 原型模式（上）

我们创建的每一个函数都有一个prototype（原型）属性，该属性是一个对象，包含可以有特定类型的所有实例共享的属性和方法。使用它的好处就在于可以让所有对象实例共享它所包含的属性和方法，也就是说，不必在构造函数中定义对象的信息，而是可以将这些信息，直接添加在原型对象中，如下所示，还是接着改写前两篇日志中的例子：


代码如下:

function Employee() {
};
Employee.prototype.Name = "Jim";
Employee.prototype.Age = 28;
Employee.prototype.Job = "SoftWare Engineer";
Employee.prototype.SayName = function () {
alert(this.Name);
};
var employee1 = new Employee();
employee1.SayName();//Jim
var emplayee2 = new Employee();
emplayee2.SayName(); //Jim
alert(employee1.SayName = emplayee2.SayName);//true

与构造函数模式不同的是，新对象的这些属性和方法是由所有实例共享的。
以上即是原型模式的一个引子，要理解原型模式的工作原理，就需要了解ECMASCRIPT中原型的性质。
理解原型
在Javascript中，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性。在默认的情况下，虽有prototype属性都会自动获得一个constructor属性，这个属性包含一个指向prototype属性所在函数的指针，而通过这个构造函数，我们还可以继续为原型添加其他属性和方法。
创建了自定义的构造函数之后，其原型属性默认只会取得constructor属性，而至于其他的方法，则都是从Object继承来的。当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型属性。要注意的是这个连接存在于实例和构造函数原型属性之间，而不是存在于实例与构造函数之间。
在某些实现中，无法访问到内部属性（_proto_属性），但是在所有实现中都可以通过isPrototypeOf方法来确定对象之间是否存在这种原型关系。从本质上来看，如果对象的_proto_属性指向isPrototypeOf，这个方法就返回true。如下所示：


代码如下:

alert(Employee.prototype.isPrototypeOf(employee1)); //true
alert(Employee.prototype.isPrototypeOf(employee2));//true

每当代码读取某个对象的某个属性时，都会执行搜索，目标是具有给定名字的属性。搜索最先从对象实例本身开始。如果在实例中找到具有给定名字的属性，则然后该属性的值，如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性。如果在原型对象中找到这个属性，则返回该属性的值。这也正是对个对象实例共享原型所保存的属性和方法的基本原理。
前面说过，原型最初只包含constructor属性，而该属性也是共享的，因此可以通过对象实例访问
虽然可以通过对象实例访问保存在原型中的值，但是不能通过对象实例重写原型中的值，如果我们在实例中添加一个属性，而该属性与实例原型中的一个属性名称相同，name在实例中创建的属性会屏蔽（.net成为隐藏）原型中的那个属性，如下所示：


代码如下:

function Employee() {
};
Employee.prototype.Name = "Jim";
Employee.prototype.Age = 28;
Employee.prototype.Job = "SoftWare Engineer";
Employee.prototype.SayName = function () {
alert(this.Name);
};
emplayee2.Name = "Sun";
alert(employee1.Name); //Jim
alert(employee2.Name);//Sun

其中employee1.Name的Jim来自原型，二employee2.Name的sun来自实例。

赞 (0)

相关推荐

  • 构造函数+原型模式构造js自定义对象(最通用)

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /* * 组合模式: 构造函数模式+原型模式 这种方式是javascript中最通用的创建对象的方式 变量类型属性:用构造函数传

  • .NET原型模式讲解

    .NET原型模式讲解

    原型模式的定义: 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 原型模式结构图: 创建型模式中一个比较特殊的模式-原型模式,有个最大的特点是克隆一个现有的对象,这个克隆的结果有2种,一种是浅度复制,另一种是深度复制. 创建型模式一般是用来创建一个新的对象,然后我们使用这个对象完成一些对象的操作,我们通过原型模式可以快速的创建一个对象而不需要提供专门的new()操作就可以快速完成对象的创建,这无疑是一种非常有效的方式,快速的创建一个新的对象. 1.原型模式:浅度复制 定义一个接

  • javascript原型模式用法实例详解

    本文实例讲述了javascript原型模式用法.分享给大家供大家参考.具体分析如下: 一般在了解了工厂模式和构造函数模式的弊端之后,就知道为什么需要原型模式了   原型模式i的定义:每个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.比如在构造函数模型中sayInformation()方法,如果声明两个实例就要构造两次sayInformation方法,但是声明两次是没有必要的,这就是为什么有原型模式的出现(尼玛,网上那些博客

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

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

  • C++设计模式之原型模式

    C++设计模式之原型模式

    什么是原型模式? 在GOF的<设计模式:可复用面向对象软件的基础>中是这样说的:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象.这这个定义中,最重要的一个词是"拷贝",也就是口头上的复制,而这个拷贝,也就是原型模式的精髓所在. 举一个最简单的例子来说明原型模式:记得上小学的时候,老师把需要做的课外习题写到黑板上,而下面的我们都要把这些题抄写到自己的本子上,回家做好,第二天交上来,也就是每道题,全班50个人,每个人都要抄写一遍.按照现在的时间理论来说,就是浪费

  • 浅析php原型模式

    原型模式: 用原型实例指定创建对象的种类,并且通过拷贝这个原型来创建新的对象. 应用场景: 类的资源非常多.性能和安全要求,一般和工厂方法结合使用. 复制代码 代码如下: <?php /**  * 原型模式  */ //声明一个克隆自身的接口 interface Prototype {     function copy(); }   //产品要实现克隆自身的操作 class Student implements Prototype {        //简单起见,这里没有使用get set  

  • js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)

    在上篇文章给大家介绍了javascript面向对象基础,本篇文章继续深入学习javascript面向对象,JS的语法非常灵活,简单的对象创建就有好几种不同的方法.这些过于灵活的地方有时候确实很让人迷惑,那么今天我们就来梳理一下JS中常用的创建对象的几种方法吧. 前言 虽然使用 Object构造函数 或者使用 对象字面量 可以很方便的用来创建一个对象,但这种方式有一个明显的缺点:使用一个接口创建多个对象会产生很多冗余的代码.因此为了解决这个问题,人们开始使用以下几种方式来常见对象. 工厂模式 该模

  • JavaScript设计模式之原型模式(Object.create与prototype)介绍

    原型模式说明 说明:使用原型实例来 拷贝 创建新的可定制的对象:新建的对象,不需要知道原对象创建的具体过程: 过程:Prototype => new ProtoExam => clone to new Object; 使用相关代码: 复制代码 代码如下: function Prototype() {     this.name = '';     this.age = '';     this.sex = ''; } Prototype.prototype.userInfo = functio

  • javascript 原型模式实现OOP的再研究

    复制代码 代码如下: 复制代码 代码如下: function A() { this.v1 = 10; } A.prototype.print = function() { alert(this.v1); } function B() { } B.prototype = new A(); new B().print(); 运行这段代码输出是10,看起来好像是类B继承了类A的方法print,并产生了正确的输出,实际上的执行流程是在类B生成的对象中,不能直接得到方法print,于是在它的prototy

  • php设计模式 Prototype (原型模式)代码

    复制代码 代码如下: <?php /** * 原型模式 * * 用原型实例指定创建对象的种类.并且通过拷贝这个原型来创建新的对象 * */ abstract class Prototype { private $_id = null; public function __construct($id) { $this->_id = $id; } public function getID() { return $this->_id; } public function __clone()

随机推荐