浅谈javascript的原型及原型链

浅谈javascript的原型及原型链

这里，我们列出原型的几个概念，如下：

  • prototype属性
  • [[prototype]]
  • __proto__

prototype属性

只要创建了一个函数，就会为该函数创建一个prototype属性，指向该函数的原型对象。实例对象是不会拥有该属性的。
默认情况下，该原型对象也会获得一个constructor属性，该属性包含一个指针，指向prototype属性所在的函数。

Person.prototype.constructor===Person

[[prototype]]和__proto__

javascript中，不可以访问的内部属性都是用[[propertyName]]这种形式来表示的，比如还有枚举属性[[Enumberable]]。

[[prototype]]属性只能是对象可以拥有的属性。比如实例化的对象以及原型对象，而不是构造函数。这个属性指向拥有其属性的对象的构造函数的原型对象。注意，此处的构造函数指的是使用new方式的构造函数。并不因为更改了原型对象上的constructor属性而改变。

__proto__是个啥呢，就是对[[propertyName]]的实现。也就是说，你可以在支持该实现的浏览器下（FF，chrome，safari），去访问对象的构造函数的原型对象。比如：

var Person=function(name){
    this.name=name;
};

var p1=new Person();
p1.__proto__===Person.prototype;//true

Person.prototype={};

var p2=new Person();

p2.__proto__===Object.prototype;//false

当然，__proto__只是浏览器的私有实现，目前ECMAScript标准实现方法是Object.getPrototypeOf(object)。

var Person=function(name){
    this.name=name;
};

var p1=new Person();
Object.getPrototypeOf(p1)===Person.prototype;//true

Person.prototype={};

var p2=new Person();

Object.getPrototypeOf(p2)===Object.prototype;//false

另外一种判断实例对象和其原型对象存在指向关系（由实例的[[prototype]]指向其构造函数的原型对象）的方法是：isPrototypeOf。比如：

Person.prototype.isPrototypeOf(p1);//true

由于原型对象也是一个对象，所以，它自然而然也拥有[[prototype]]属性。

Javascript 并没有类继承模型，而是使用原型对象 prototype 进行原型式继承。
尽管人们经常将此看做是 Javascript 的一个缺点，然而事实上，原型式继承比传统的类继承模型要更加强大。举个例子，在原型式继承顶端构建一个类模型很简单，然而反过来则是个困难得多的任务。
Javascript 是唯一一个被广泛运用的原型式继承的语言，所以理解两种继承方式的差异是需要时间的。

第一个主要差异就是 Javascript 使用原型链来继承：

function Foo() {
    this.value = 42;
}
Foo.prototype = {
    method: function() {}
};
function Bar() {}

设置 Bar 的 prototype 为 Foo 的对象实例：

Bar.prototype = new Foo();
Bar.prototype.foo = ‘Hello World‘;

确保 Bar 的构造函数为本身，并新建一个 Bar 对象实例：

Bar.prototype.constructor = Bar;
var test = new Bar();

下面我们来看下整个原型链的组成：

test [instance of Bar]
    Bar.prototype [instance of Foo]
        { foo: ‘Hello World‘ }
        Foo.prototype
            { method: ... }
            Object.prototype
                { toString: ... /* etc. */ }

在上面的例子中，对象 test 将会同时继承 Bar.prototype 和 Foo.prototype。因此它可以访问定义在 Foo 中的函数 method。当然，它也可以访问属性 value。需要提到的是，当 new Bar() 时并不会创建一个新的 Foo 实例，而是重用它原型对象自带的 Foo 实例。同样，所有的 Bar 实例都共享同一个 value 属性。我们举例说明：

 test1 = new Bar();
 test2 = new Bar();
 Bar.prototype.value = 41;
 test1.value //41
 test2.value//41

原型链查找机制

当访问一个对象的属性时，Javascript 会从对象本身开始往上遍历整个原型链，直到找到对应属性为止。如果此时到达了原型链的顶部，也就是上例中的 Object.prototype，仍然未发现需要查找的属性，那么 Javascript 就会返回 undefined 值。

原型对象的属性

尽管原型对象的属性被 Javascript 用来构建原型链，我们仍然可以值赋给它。但是原始值复制给 prototype 是无效的，如：

function Foo() {}
Foo.prototype = 1; // no effect

这里讲个本篇的题外话，介绍下什么是原始值:
在 Javascript 中，变量可以存放两种类型的值，分别是原始值和引用值。

1.原始值(primitive value):
原始值是固定而简单的值,是存放在栈 stack 中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。
原始类型有以下五种型: Undefined, Null, Boolean, Number, String。

2.引用值(reference value):
引用值则是比较大的对象，存放在堆 heap 中的对象，也就是说，存储在变量处的值是一个指针 pointer，指向存储对象的内存处。所有引用类型都集成自 Object。

原型链性能问题

如果需要查找的属性位于原型链的上端，那么查找过程对于性能而言无疑会带来负面影响。当在性能要求必要严格的场景中这将是需要重点考虑得因素。此外，试图查找一个不存在属性时将会遍历整个原型链。
同样，当遍历一个对象的属性时，所有在原型链上的属性都将被访问。

总结

理解原型式继承是写较为复杂的 Javascript 代码的前提，同时要注意代码中原型链的高度。当面临性能瓶颈时要学会将原型链拆分开来。此外，要将原型对象 prototype 和原型 __proto__ 区分开来，这里主要讨论原型对象 prototype 就不阐述关于原型 __proto__ 的问题了。

图片来自基友 kzloser

图片说明

1.总共三类对象(蓝色大框)

2.实例对象（通过new XX() 所得到的实例），跟原型链相关的只有 __proto__ 属性，指向其对应的原型对象 *.prototype 。

3.构造函数对象分原生和自定义两类。跟原型链相关的有 __proto__ 属性，除此之外还有 prototype 属性。它们的 __proto__ 属性都是指向 Function.prototype 这个原型对象的。prototype 也是指向对应的原型对象。

4.原型对象除了一样拥有 __proto__ 外，也拥有独有的属性 constructor 。它的__proto__ 指向的都是 Object.prototype ，除了 Object.prototype 本身，它自己是指向 null 。而 constructor 属性指向它们对应的构造函数对象。

5.原型链是基于 __proto__ 的。实例只能通过其对应原型对象的 constructor 才能访问到对应的构造函数对象。构造函数只能通过其对应的 prototype 来访问相应的原型对象。

原型与原型链是javascript里面最最核心的内容，如果不能理解它们之间的存在关系的话，那么我们是不能理解这门语言的。

在JS中，主要有两种创建对象的方法, 分别是对象字面量以及调用构造函数

//对象字面量
var obj1 = {}

//调用构造函数
var obj2 = new Object()

其实上述两种创建对象的方法，本质上是一样的，都是JS引擎调用对象的构造函数来新建出一个对象。构造函数本身也是一个普通的JS函数

下面我们来看一个例子

//创建构造函数
function Person(name){
    this.name = name
}

//每个构造函数JS引擎都会自动添加一个prototype属性，我们称之为原型，这是一个对象
//每个由构造函数创建的对象都会共享prototype上面的属性与方法
console.log(typeof Person.prototype) // ‘object‘

//我们为Person.prototype添加sayName方法
Person.prototype.sayName = function(){
    console.log(this.name)
}

//创建实例
var person1 = new Person(‘Messi‘)
var person2 = new Person(‘Suarez‘)

person1.sayName() // ‘Messi‘
person2.sayName() // ‘Suarez‘

person1.sayName === person2.sayName //true

我们借助上面的例子来理解构造函数-原型-实例，三者之间的关系，主要有几个基本概念

  • 构造函数默认会有一个protoype属性指向它的原型
  • 构造函数的原型会有一个consctructor的属性指向构造函数本身, 即 
    Person.prototype.constructor === Person
  • 每一个new出来的实例都有一个隐式的__proto__属性，指向它们的构造函数的原型，即 
    person1.__proto__ === Person.prototype
person1.__proto__.constructor === Person

了解了这些基本概念之后，我们再来看看javascript的一些原生构造函数的关系网，看下列的图


引自stackoverflow

按照我们上面的理解, Oject本身是一个构造函数，它也是一个对象，那么

Object.__proto__ === Function.prototype

为了方便我们记住上图，还有几个需要我们知道的特殊概念：

  • Function的原型属性与Function的原型指向同一个对象. 即

    Function.__proto__ == Function.prototype
  • Object.prototype.__proto__ === null
  • typeof Function.prototype === ‘function‘
时间： 2024-10-18 19:14:07

浅谈javascript的原型及原型链的相关文章

浅谈JavaScript中的原型模式

在JavaScript中创建对象由很多种方式,如工厂模式.构造函数模式.原型模式等: <pre name="code" class="html">//工厂模式 function createPerson(name,age,job) { var o = new Object; o.name = name; o.age = age; o.job = job; o.sayName = function() { alert(this.name); } retur

《浅谈JavaScript系列》系列技术文章整理收藏

<浅谈JavaScript系列>系列技术文章整理收藏 1浅谈JavaScript中面向对象技术的模拟 2浅谈javascript函数劫持[转自xfocus]第1/3页 3浅谈javascript 面向对象编程 4老鱼 浅谈javascript面向对象编程 5浅谈javascript的数据类型检测 6浅谈Javascript嵌套函数及闭包 7根据一段代码浅谈Javascript闭包 8浅谈JavaScript编程语言的编码规范 9浅谈Javascript面向对象编程 10浅谈JavaScript

浅谈javascript继承【读javascript设计模式第四章节继承有感】

javascript继承,无任是类式继承,原型式继承还是渗元式继承都是通过不同方法去围绕着prototype转,简单分析下三种不同继承方法是如何围绕prototype转的 一:类似继承,先上关键代码 function extend(subClass,supClass){ var fn = function(){}; fn.prototype = supClass.prototype; subClass.prototype = new fn(); subClass.prototype.constr

浅谈 JavaScript 编程语言的编码规范

对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编码规范也往往被轻视,开发过程中修修补补,最终也就演变成为后续维护人员的恶梦.软件存在的长期价值直接与编码的质量成比例.编码规范能帮助我们降低编程中不必要的麻烦.而 JavaScript 代码是直接发送给客户浏览器的,直接与客户见面,编码的质量更应该受到关注. 本文浅谈 JavaScript 编程中关

浅谈javascript单体【读javascript设计模式第五章节单体有感】

单体,整个运行环境就独有一份,最简单的一种单体就是一个把所有属性和方法都集中在一起的对象,区别于一般的字面量对象,一般字面量对象是对一个物体的描述,集合该物体所具有的一些属性和方法,而单体则包含更多的些逻辑在里面,单体的好处有,划分命名空间,如果用来作为网页包装器,可以使得页面所有变量都封装在一个对象里,大幅度减小网页里的全局变量, 代码如: common.js (function(wz){ $.extend({ init:function(){ var self = this; this.bi

浅谈javascript函数劫持

http://www.xfocus.net/articles/200712/963.html 浅谈javascript函数劫持 文章提交:hkluoluo (luoluonet_at_hotmail.com) by luoluo on 2007-11-30 luoluonet_at_yahoo.cn http://www.ph4nt0m.org 一.概述 javascript函数劫持,也就是老外提到的javascript hijacking技术.最早还是和剑心同学讨论问题时偶然看到的一段代码,大

浅谈JavaScript运行机制

浅谈JavaScript运行机制 ? 想要了解一门语言,最好的办法就是了解它的运行机制.掌握了运行机制,能够让我们在开发中少走许多弯路,写出高质量的代码.本文简单介绍什么是JavaScript的运行机制,给刚刚接触JavaScript的小白一个初步的了解,为将来打好基础. 一.JavaScript 代码运行分两个阶段: 1.预解析---把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前 2.执行---从上到下执行(按照js运行机制) 二.JavaScript运行机制的特点 1.JavaS

浅谈Javascript中的原型、原型链、继承

构造函数,原型,实例三者的关系 构造函数: 构造函数是创建对象的一种常用方式, 其他创建对象的方式还包括工厂模式, 原型模式, 对象字面量等.我们来看一个简单的构造函数: function Product (name, role){ //构造函数的命名约定第一个字母使用大写的形式! this.name = name; this.role = role; } ( 1 ) 每一个构造函数都有一个prototype属性,我们可以在Chorme控制台中打印出Product.prototype属性. (

浅谈JavaScript原型与原型链

对于很多前端开发者而言,JavaScript的原型实在是很让人头疼,所以我这边就整理了一下自己对应原型的一点理解,分享给大家,供交流使用 原型 说起原型,那就不得不说prototype.__proto__.constructor三者的关系,其中比较麻烦的就是容易将prototype和__proto__混淆,这也是因为它们之间的指向确实有些复杂 function Heternally(){}; var f1 = new Heternally; 通过上述两行代码先创建一个函数对象,然后使用new实例