[JavaScript]原形模式prototype

  JavaScript中创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按字面的意思来理解,那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中,如下面的例子所示。

 1 function Person() {
 2 }
 3
 4 Person.prototype.name = "Baka";
 5 Person.prototype.age = 23;
 6 Person.prototype.job = "Student";
 7 Person.prototype.sayName = function() {
 8     alert(this.name);
 9 };
10
11 var person1 = new Person();
12 person1.sayName(); // "Baka"
13
14 var person2 = new Person();
15 person2.sayName(); // "Baka"
16
17 alert(person1.sayName == person2.sayName); // ture

  每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性,则返回该属性的值。也就是说,在我们调用person1.sayName()的时候,会先后执行两次搜索。首先,解析器会问:“实例person1有sayName属性吗?” 答:“没有。” 然后,它继续搜索,再问 “person1 的原型有sayName属性吗?” 答:“有。” 于是,它就读取那个保存在原型对象中的函数。当我们调用person2.sayName()时,将会重现相同的搜索过程,得到相同的结果。这正是多个对象实例共享原型所保存的属性和方法的基本原理。

  虽然可以通过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性,而该属性与实例原型中的一个属性同名,那我们就在实例中创建该属性,该属性将会屏蔽原型中的那个属性:

function Person() {
}
Person.prototype.name = "Baka";
Person.prototype.age = 23;
Person.prototype.job = "Student";
Person.prototype.sayName = function() {
    alert(this.name);
};

var person1 = new Person();
var person2 = new Person();
person1.name = "Akuma";

alert(person1.name); // "Akuma"——来自实例
alert(person2.name); // "Baka"——来自原型

  当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性。即使将这个属性设置为null,也只会在实例中设置这个属性,而不会回复指向原型的连接。不过,使用delete操作符则可以完全删除实例属性,从而让我们能够重新访问原型中的属性。

 1 /*
 2  *    Person原型定义
 3  */
 4
 5 var person1 = new Person();
 6 var person2 = new Person();
 7
 8 person1.name = "Akuma";
 9 alert(person1.name); // "Akuma"
10 alert(person2.name); // "Baka"
11
12 delete person1.name;
13 alert(person1.name); // "Baka"

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

  使用in操作符可以判断属性是否存在于对象实例或者原型实例中。

  更简单的原型语法:

 1 function Person() {
 2 }
 3
 4 Person.prototype = {
 5     name : "Baka",
 6     age : 23,
 7     job : "Student",
 8     sayName : function() {
 9         alert(this.name);
10     }
11 };

时间: 2024-10-05 23:20:45

[JavaScript]原形模式prototype的相关文章

Javascript 严格模式详解

Javascript 严格模式详解 作者: 阮一峰 日期: 2013年1月14日 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).顾名思义,这种模式使得Javascript在更严格的条件下运行. 设立"严格模式"的目的,主要有以下几个: - 消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; - 消除代码运行的一些不安全之处,保证代码运行的安全: - 提高编译器效率,增加运行速度

JavaScript中Object.prototype.toString方法的原理

在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. ? 1 2 var arr = []; console.log(Object.prototype.toString.call(arr)) //"[object Array]" 本文要讲的就是,toString方法是如何做到这一点的,原理是什么. ECMAScript 3 在ES3中,Object.prototype.toString方法的规范如下:

Javascript原型模式总结梳理

在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样.Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现.在原型编程语言中,类并不是必需的,对象不一定需要由类实例化而来,而是通过克隆另外一个对象来得到. 原型模式是用来创建对象的一种模式.在以类为中心的语言中,要创建一个对象首先要指定这个对象的类型,然后实例化一个对象.使用原型模式创建对象时不必关心对象的具体类型,而是找到一个对象,然后通过克隆来创建一个一模一样

Javascript之深入浅出prototype

Javascript之深入浅出prototype 我们先来讲一个故事,一个大大的池塘,里面有很多鱼.这是属于我们大家的池塘所以里面的鱼我们都可以吃,但是我们也会从集市买一些鱼放在家里,那么放在家里的鱼肯定是属于我们私人的,外人是不会拥有的.那么在js里我们就把这个池塘称为原型对象,池塘里面我们所共享的鱼称为原型中的属性及方法,而我们自己的鱼称为构造函数中的属性及方法,我们是什么呢?对了,我们是对象的实例. 以上是为了让大家能够趣味性的对prototype有一个概念,接下来就通过代码具体总结一下p

javascript单体模式

单体模式的思想在于保证一个特定类仅有一个实例.这意味着当第二次使用同一个类创建的新对象的时候,应该得到与第一个所创建的对象完全相同. javacript中并没有类,因此对单体咬文嚼字的定义严格来说并没有意义.但是javascript具有new语法可使用构造函数来创建对象,而且有时需要使用这种语法的单体实现.这种思想在于当使用同一个构造函数以new操作符来创建多个对象时,应该仅获得指向完全相同的对象的新指针. 下面的代码显示了其预期行为: var nui = new Universe(); var

设计模式(4)-对象创建型模式-Prototype模式

1.对象创建型模式 1.4          Protoype模式 1.4.1需求 通过拷贝原形对象创建新的对象. 1.4.2结构 ?P r o t o t y p e(Gr a p h i c) - 声明一个克隆自身的接口. ?C o n c r e t e P r o t o t y p e(S t a ff.W h o l e N o t e.H a l fN o t e) - 实现一个克隆自身的操作. ?  C l i e n t(G r a p h i c To o l) - 让一个原

Javascript属性constructor/prototype的底层原理

在Javascript语言中,constructor属性是专门为function而设计的,它存在于每一个function的prototype属性中.这个constructor保存了指向function的一个引用.在定义一个函数(代码如下所示)时, function F() { // some code } JavaScript内部会执行如下几个动作: 为该函数添加一个原形属性(即prototype对象). 为prototype对象额外添加一个constructor属性,并且该属性保存指向函数F的

Javascript 严格模式(strict mode)详解

Javascript 严格模式详解 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).顾名思义,这种模式使得Javascript在更严格的条件下运行. 设立"严格模式"的目的,主要有以下几个: - 消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; - 消除代码运行的一些不安全之处,保证代码运行的安全: - 提高编译器效率,增加运行速度: - 为未来新版本的Javascript做好

Javascript 严格模式与正常模式的区别

原来来自:http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html Javascript 严格模式详解 作者: 阮一峰 日期: 2013年1月14日 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).顾名思义,这种模式使得Javascript在更严格的条件下运行. 设立"严格模式"的目的,主要有以下几个: - 消除Javascr