JaveScript中的几个关键概念的理解-原型链的构建

Javascript中所有function中都有一个prototype属性,并且这个prototype属性是一个object类型的对象,所有由该function构造出来的对象都具有这个prototype上的特性,也就是说可以用构造出来的对象直接访问prototype上的属性和方法。
下面一段代码演示prototype的使用方法:


复制代码 代码如下:

function Staff(name) {
this.name = name;
}
Staff.prototype.say = function() {
alert(this.name + " say hello");
}
var staff1 = new Staff("hunter");
var staff2 = new Staff("dangjian");
staff1.say();
staff2.say();

运行如上的程序,可知prototype上的属性和方法可以通过创建的对象之间调用,更重要的是prototype中的属性和方法是在同类型的对象中是共享的


复制代码 代码如下:

alert( staff1.say == staff2.say);

prototype另外一个常用的特性是通过prototype构建对象的继承关系,通过把基类对象赋给子类的prototype的方式可以模拟面向对象中的继承关系,这就是大家经常说的JavaScript的面向对象机制。如下的代码段演示了利用这一特性构建对象的继承关系:


复制代码 代码如下:

function Staff(name) { // 基类
this.name = name;
}
Staff.prototype.say = function() {
alert(this.name + " say hello");
}
function ManStaff(name, age) { // 子类
this.name = name;
this.age = age;
}
ManStaff.prototype = new Staff(); // 建立继承关系
var manStaff1 = new ManStaff("hunter", 22);
var manStaff2 = new ManStaff("dangjian", 32);
manStaff1.say();
manStaff2.say();

运行代码可知,ManStaff对象中具有了基类Staff中的Say方法,这种继承方式在JavaScript中是通过prototype链来实现的。大家可能熟悉以上的prototype用法,可是作为程序员,我们不光要知道其用法,我们更应该理解其可是prototype的内部机制。下面我们来分析prototype的原理以及prototype链的实现。
要理解prototype的机制就必须要了解JavaScript中function的创建方式。
当代码执行到function Staff(name) {this.name = name;}时,相当于执行var Staff = new Function(“name”, "this.name = name”)解释器将使用预定义好的Function() constructor,来创建一个function类型的object出来,即Staff。

随后给创建好的Staff对象添加__proto__属性,并赋值为Function的构造器的prototype,这一步是所有对象创建过程中都有的步骤,在执行类似var x = new X()方式是,都会把X的prototype赋值给x的__proto__,类似如下的赋值:


复制代码 代码如下:

Staff.__proto__ = Function.prototype;

接下来给Staff创建prototype属性,这一步是创建function类型的对象具有的步骤,创建的过程如下伪代码:


复制代码 代码如下:

var o = new Object();
o.constructor = Base;
Staff.prototype = o;

如上的分析我们可知,当创建对象时,会创建一个私有属性__proto__,当创建function是会创建一个prototype属性。因为Staff是一个function类型的对象,所以会同时具有这两个属性。
这两个属性是构建原型链的关键属性。我们来分析执行代码 var staff1 = new Staff(“hunter”)时,原型是如何传递的。
根据如上分析,staff1.__proto__ = Staff.prototype,而Staff.prototype又是一个由Object创建的对象,即Staff.prototype.__proto__ = Object.prototype,所以staff1.__proto__ .__proto__ 指向的是Object.prototype,即staff1.__proto__ .__proto__ == Object.prototype,这就是原型链,当要读取某个对象的属性时,JS首先找对象本身是否有这个属性,如果没有就会顺着原型链一直寻找这个属性。
知道了原型链的原理,那么就很容易根据这个原理来构建Javascript中的对象继承。
由如上的分析,我们可知原型链的顶端都是Object.prototype,这就意味着在构建的继承关系中Object是所有对象的基类,可以运行如下的代码验证。


复制代码 代码如下:

Object.prototype.location = "China";
function Staff(name) { // 基类
this.name = name;
}
Staff.prototype.say = function() {
alert(this.name + " say hello");
}
var ManStaff1 = new Staff("hunter");
var ManStaff2 = new Staff("dangjian");
alert(ManStaff1.location);
alert(ManStaff2.location);

运行结果知道,Object是Staff的基类,那么要如何构建一个Staff的子类呢?
理解了上面函数的建立原理,我们很容易写出如下的代码:


复制代码 代码如下:

function Staff(name) { // 基类
this.name = name;
}
Staff.prototype.say = function() {
alert(this.name + " say hello");
}
function ManStaff(name, age) { // 子类
Staff.call(this,name);
this.age = age;
}
ManStaff.prototype = new Staff(); // 建立继承关系
var ManStaff1 = new ManStaff("hunter", 22);
var ManStaff2 = new ManStaff("dangjian", 32);
ManStaff1.say();
ManStaff2.say();

建立继承关系的就是这句:ManStaff.prototype = new Staff(); ,继承关系推算如下:ManStaff1.__proto__ = =ManStaff.prototype, ManStaff.prototype.__proto__ = Staff.prototype, Staff.prototype.__proto__ == Object.prototype;则ManStaff1.__proto__.__proto__.__proto__ == Object.prototype。
javascript中的这种继承关系比较传统面向对象的继承关系更松散,构建方式也比较难以理解,但是作为脚本语言,其功能已经是非常强大了。

时间: 2011-05-10

js原型链原理看图说明

当初ECMAscript的发明者为了简化这门语言,同时又保持继承的属性,于是就设计了这个链表.. 在数据结构中学过链表不,链表中有一个位置相当于指针,指向下一个结构体. 于是乎__proto__也一样,每当你去定义一个prototype的时候,相当于把该实例的__proto__指向一个结构体,那么这个被指向结构体就称为该实例的原型. 文字说起来有点儿绕,看图说话 复制代码 代码如下: var foo = { x: 10, y: 20 }; 当我不指定__proto__的时候,foo也会预留一个这

无废话JavaScript教程(全集)第1/4页

<程序员>2008.09期有一篇名为<无废话ErLang>的文章,这让我想到了许多的诸如"无废话C"."无废话书评"这类的文章,也想到了JavaScript可没有一篇"无废话",所以决定开个篇来写这个.与这个决定相关的,还因为另一个缘故:许多读者认为我那本<JavaScript语言精髓与编程实践>读来辛苦,所以我一直想写个简单的读本.索性,这次就写个最简单的吧. 声明一下:如果只想看复杂的东西,不要读这篇文章了

国外的为初学者写的JavaScript教程

Embedding and including write and writeln Document object Message box Function Event handler Form Link Date Window Frame Embedding and including Let's first see a simple example: <html> <head> <title>This is a JavaScript example</titl

javascript教程之不完整的继承(js原型链)

Javascript的继承和标准的oop继承有很大的区别,Javascript的继承是采用原型链的技术,每个类都会将"成员变量"和"成员函数"放到 prototype 上,Js++都过superclass将其链接起来,即 C.prototype.superclass = C.superclass = P.prototype;当 var c = new C()时,c.__proto__ = C.prototype ;当 c访问"成员变量"时,如果在

JS继承--原型链继承和类式继承

什么是继承啊?答:别人白给你的过程就叫继承. 为什么要用继承呢?答:捡现成的呗. 好吧,既然大家都想捡现成的,那就要学会怎么继承! 在了解之前,你需要先了解构造函数.对象.原型链等概念...... JS里常用的两种继承方式: 原型链继承(对象间的继承)类式继承(构造函数间的继承) 原型链继承: 复制代码 代码如下: //要继承的对象var parent={name : "baba" say : function(){ alert("I am baba");}} //

基于JavaScript实现继承机制之原型链(prototype chaining)的详解

如果用原型方式重定义前面例子中的类,它们将变为下列形式: 复制代码 代码如下: function ClassA() {} ClassA.prototype.color = "blue";ClassA.prototype.sayColor = function () {    alert(this.color);}; function ClassB() {} ClassB.prototype = new ClassA(); 原型方式的神奇之处在于最后一行代码.这里,把 ClassB 的

javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式

在使用面向对象编程时,对象间的继承关系自然少不了!而原型正是实现javascript继承的很重要的一种方法! 我们首先来看以下代码: 复制代码 代码如下: function person(name, age) { this.name = name; this.age = age; } person.prototype.getInfo = function() { alert("My name is "+this.name+", and I have "+this.a

Javascript学习笔记7 原型链的原理

我们先看看这样一段代码: 复制代码 代码如下: <script type="text/javascript"> var Person = function () { }; var p = new Person(); </script> 很简单的一段代码,我们来看看这个new究竟做了什么?我们可以把new的过程拆分成以下三步: <1> var p={}; 也就是说,初始化一个对象p. <2> p.__proto__=Person.proto

深入理解JavaScript系列(6) 强大的原型和原型链

前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实现传统的类继承模型是很简单,但是实现 JavaScript 中的原型继承则要困难的多. 由于 JavaScript 是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. 原型 10年前,我刚学习JavaScript的时候,一般都是用

基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解

构造函数.原型实现继承的缺陷 首先来分析构造函数和原型链两种实现继承方式的缺陷: 构造函数(对象冒充)的主要问题是必须使用构造函数方式,且无法继承通过原型定义的方法,这不是最好的选择.不过如果使用原型链,就无法使用带参数的构造函数了.开发者如何选择呢?答案很简单,两者都用. 构造函数+原型混合方式 这种继承方式使用构造函数定义类,并非使用任何原型.创建类的最好方式是用构造函数定义属性,用原型定义方法.这种方式同样适用于继承机制,用对象冒充继承构造函数的属性,用原型链继承 prototype 对象

javascript prototype 原型链

JavaScript中的prototype概念恰如其分地反映了这个词的内含,我们不能将其理解为C++的prototype那种预先声明的概念. JavaScript 的所有function类型的对象都有一个prototype属性.这个prototype属性本身又是一个object类型的对象,因此我们也可以给这个prototype对象添加任意的属性和方法.既然prototype是对象的"原型",那么由该函数构造出来的对象应该都会具有这个"原型"的特性.事实上,在构造函数

JavaScript 原型链学习总结

Function和Object都是函数的实例 Function的父原型指向到Function的原型,Function的原型的父原型是Object的原型. Object的父原型也指向到Function的原型. 一个实例的对像,它的默认的父原型为其构造函数的显示原型 [每个对像都有一个隐慝的属性用于指向到它的父对像(构造对像的函数)的原型(这里称为父原型或隐式原型).因为原型也是对像,所以原型也有父原型,Object的原型是所有父原型的顶层(原型根),这样就形成了所谓原型链] 对像属性访问原则 当从

Javascript之旅 对象的原型链之由来

以问题开始: function Base(){}var base = new Base() 上面两行代码会创建几个对象(object)? 要回答这个问题,先明确一下Javascript里object的概念. Objects 在Javascript里,几乎一切都是object(Arrays.Functions.Numbers.Objects--),而没有C#里的class的概念.object的本质是一个name-value pairs的集合,其中name是string类型的,可以把它叫做"prop

Javascript中的对象和原型(二)

在上篇文章中JavaScript中的对象和原型(一)提到了JavaScript中对象的创建的一些基本操作,接下来讨论下继续讨论. 一 工厂模式 我们知道,要创建一个对象我们可以用如下代码: var user = new Object(); //使用new运算符创建一个对象 user.name = '念在三角湖畔'; //给对象添加属性 user.age = 22; user.address = '湖北武汉'; alert(user.name + " " +user.age);//返回

JavaScript中的对象和原型(一)

面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首先就要了解Javascript中的对象和原型.这篇文章中主要学习一下Javascript中的对象. 一 关于对象 对象其实就是一种引用类型.而对象的值就是引用类型的实例.在JavaScript 中引用类型是一种数据结构,将数据和功能组织在一起.它也常被称做为类,但JavaScript 中却没有类的概

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

在Javascript中,如果我们有一个对象但是又不知道它的构造函数时,如何获取它的原型对象呢? 在Chrome中或是FireFox浏览器中,我们可以直接使用对象的__proto__属性获取它的原型对象. 复制代码 代码如下: <!-- lang: js --> function F(){}; var foo = new F(); alert(foo.__proto__ == F.prototype); 但是,__proto__属性在IE浏览器中一直到IE11才被支持. 那么在不支持__pro

javascript中对象的定义、使用以及对象和原型链操作小结

本文实例总结了javascript中对象的定义.使用以及对象和原型链操作.分享给大家供大家参考,具体如下: 1. 除了5种基本类型外,JS中剩下的就是对象 (1)对象的定义: 直接定义: var test={x:1,y:1} new方式创建: var test=new Object({x:1}) Object.create方式: var test=Object.create({x:1}) (2)对象上的赋值与取值 举例: var test={ x:1, y:2 } 方法一:可以通过test['x

举例说明JavaScript中的实例对象与原型对象

首先声明:javascript中每个对象都有一个constructor属性和一个prototype属性.constructor指向对象的构造函数,prototype指向使用构造函数创建的对象实例的原型对象. function Person(){ } var person = new Person(); Person.prototype = { constructor : Person, name : 'zxs', age : 24, sayName : function(){alert(this

javascript当中的代码嗅探扩展原生对象和原型(prototype)

注:翻译之中有什么不恰当的地方,欢迎大家指正,祝大家双节快乐! 如果不是有特殊需要而去扩展原生对象和原型(prototype)的做法是不好的 复制代码 代码如下: //不要这样做 Array.prototype.map = function() { // 一些代码 }; 除非这样做是值得的,例如,向一些旧的浏览器中添加一些ECMAScript5中的方法. 在这种情况下,我们一般这样做: 复制代码 代码如下: if (!Array.prototype.map) { Array.prototype.

图文详解JavaScript的原型对象及原型链

对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张所谓很经典的图,上面画了各种线条,一会连接这个一会连接那个,说实话我自己看得就非常头晕,更谈不上完全理解了.所以我自己也想尝试一下,看看能不能把原型中的重要知识点拆分出来,用最简单的图表形式说清楚. 我们知道原型是一个对象,其他对象可以通过它实现属性继承.但是尼玛除了prototype,又有一个__

JavaScript作用域、闭包、对象与原型链概念及用法实例总结

本文实例讲述了JavaScript作用域.闭包.对象与原型链概念及用法.分享给大家供大家参考,具体如下: 1 JavaScript变量作用域 1.1 函数作用域 没有块作用域:即作用域不是以{}包围的,其作用域完成由函数来决定,因而if /for等语句中的花括号不是独立的作用域. 如前述,JS的在函数中定义的局部变量只对这个函数内部可见,称之谓函数作用域. 嵌套作用域变量搜索规则:当在函数中引用一个变量时,JS会搜索当前函数作用域,如果没有找到则搜索其上层作用域,一直到全局作用域. var va

JavaScript中构造函数与原型链之间的关系详解

在Javascript中不存在class的概念,它的class概念是通过构造函数(constructor)与原型链(prototype)来实现. 1.构造函数(constructor):创建对象时的初始化对象,总是与new 关键是一同出现. 构造函数存在以下特点: 1.构造函数内的this 指向当前实例对象. 2.使用new 关键字实例化当前对象. 3.构造函数首字母大写,区分普通函数. 4.实例对象都可以继承构造函数中的属性和方法.但是,同一个对象实例之间,无法共享属性. 2.原型(proto