JavaScript面向对象程序设计三 原型模式(上)_js面向对象

我们创建的每一个函数都有一个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来自实例。

时间: 2024-10-24 08:04:40

JavaScript面向对象程序设计三 原型模式(上)_js面向对象的相关文章

Javascript 面向对象(三)接口代码_js面向对象

程序中的接口:规定好有几个方法,方法名是什么.(因程序中要完成任务,都是通过函数或者说方法去实现的.) javascript中的接口:把实例出来的某"类型对象".和实例出来的"接口对象",进行一个比较,符合规则,就可以说:这个对象实现了规定的接口: (接口类:通过这个类,来实例出不同的接口.即不同的接口实例,也就是不同的方法个数和方法名称) (进行比较:其实质就是判断子类型实例出来的对象,是否有接口对象中所保存的方法名,还有个数.) 小实例: 电话类,下面可以有&q

Javascript 面向对象编程(一) 封装_js面向对象

学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学习笔记,希望对大家学习这个部分有所帮助.我主要参考了以下两本书籍: <面向对象的Javascript>(Object-Oriented JavaScript) <Javascript高级程序设计(第二版)>(Professional JavaScript for Web Developers, 2nd

JavaScript 核心参考教程 内置对象_js面向对象

这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft).Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言,从 1996 年开始,已经出现在所有的 Netscape 和 Microsoft 浏览器中.ECMA-262 的开发始于 1996 年,在 1997 年 7 月,ECMA 会员大会采纳了它的首个版本. 本系列教程旨在向大家分享本人当年学习Javascript的笔记和心得.本系列教程预计分五个部分. 第

js 函数调用模式小结_js面向对象

方法调用模式 当一个函数被保存为对象的一个属性时,我们称之它为该对象的一个方法,那么this被绑定到该对象上. 复制代码 代码如下: var myObject={ name : "myObject" , value : 0 , increment : function(num){ this.value += typeof(num) === 'number' ? num : 0; } , toString : function(){ return '[Object:'+this.name

JavaScript设计模式系列之原型模式

prototype模式通过实例对象指定需要创建的类型,这与factory method模式有本质不同,factory method模式是通过类的继承定义不同子类来达到创建不同类型对象的目的,属于类模式,prototype模式通过调用组合的对象成员生成不同类型的对象实例,属于对象模式. 由于这个特性,prototype具有以下适用场合: · 需要运行时确定实例化的类时,比如动态装载库时 · 避免创建过多子类时.子类太多永远是不受欢迎的,在factory method中我们也提到通过模板或者参数化来

JavaScript 继承详解(一)_js面向对象

面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++.C#.Java)的开发经验. 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则是类的一个具体实现. 我们还知道,面向对象编程有三个重要的概念 - 封装.继承和多态. 但是在JavaScript的世界中,所有的这一切特性似乎都不存在. 因为JavaScript本身不是面向对象的语言,而是基于对象的语言. 这里面就有一些有趣的特性,比如JavaScript中所有事物都是对象, 包

javascript创建对象之动态原型模式(五)

动态原型模式是将所有的信息都封装到工造函数中,而构造函数中初始化原型,有保持了同时在使用构造函数和原型的优点. function Human(name, sex) {             this.name = name;             this.sex = sex;             if (typeof this.say != "function") {                 Human.prototype.say = function () {   

前端开发必须知道的JS之原型和继承_js面向对象

一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型.这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型.譬如普通函数: 复制代码 代码如下: function F(){ alert(F.prototype instanceof Object) //true; } 构造函数,也即构造对象.首先了解下通过构造函数实例化对象的过程. 复制代码 代码如下: function A(x){ this.x

JavaScript 构造函数 面相对象学习必备知识_js面向对象

复制代码 代码如下: function A(x) { this.x = x; } var obj = new A(5); alert(obj.x); 这段代码十分简单,但是我们重要的是看到了一个十分惊讶的结果,obj被我们赋予了一个属性x,就如同我们在C#中使用某个类的实例的时候一样.那么这个属性是怎么样产生的呢? 关键语句:this.x=x.这句话就是进行一个属性的申明与赋值,这里,我们肯定会问到,this是什么?为什么可以使用this.x来进行申明与赋值属性呢? 其实this代表的就是我们刚