JavaScript原型继承之基础机制分析

2014-02-08  来源:本站原创  分类:javascript技巧  人气:0 

由于语言设计上的原因,JavaScript 没有真正意义上“类”的概念。而通常使用的 new 命令实例化对象的方法,其实是对原型对象的实例化。

这一语言功能的本质依赖于 JavaScript 特有的原型链(prototype chain)模式。
所以严格意义上说,JavaScript 是基于原型的面向对象语言。也就是说,每个实例对象都具有一个原型。对象从该原型中继承属性和方法。

1、构造函数

利用构造函数,可以简单地创建对象。构造函数内的 this 关键字指向实例对象本身:

function People(name){
this.name = name;
}

使用 new 运算符和构造函数创建实例对象:

复制代码 代码如下:

var people = new People('小明');
console.log(people.name); //小明

但如果创建了两个实例,这两个实例之间无法直接共享属性和方法:

复制代码 代码如下:

var people1 = new People('小明');
var people2 = new People('小王');
people1.sex = 'male';
console.log(people2.sex); //undefined

也就是说对象一旦被实例化,其属性方法都独立存在,对某个属性的修改不会影响到其他实例。

2、Prototype

于是就有了 prototype 属性,这个属性是在生成实例对象时自动创建的。它本身又是一个对象,拥有能够在实例间共享的属性和方法。而实例本身的属性和方法,则包含在构造函数中。换句话说,构造函数内部的属性和方法,在经过实例化后都成为了本地的属性和方法,而原型(prototype)中的属性和方法在实例中只是一种引用,因此能够被多个实例共享。

还是刚才那个构造函数,现在为它增加 prototype 属性:

复制代码 代码如下:

People.prototype.sex = 'female';
//或者写成 People.prototype = {sex: 'female'};
console.log(people1.sex); //male
console.log(people2.sex); //female

People 构造函数的 prototype 属性参数会直接影响到 people1 和 people2 两个实例。

但为什么 people1.sex 输出 male 呢?这是由于在 JavaScript 中,原型关系以递归形式存在。对象的原型也是一个对象,而原型的本身也可能具有一个原型。原型的最高层级是全局的 Object 对象。

这就是说,一旦 people1.sex 被设置为 male 后,它在原型中对应的值就无法被暴露出来。假如 people1.sex 本身没有值,才会从构造函数的 prototype 属性中读取,以此类推一级一级向上查找,直到 Object 对象。

注:使用 “null” 给对象赋值,可以销毁自定义对象,释放内存资源。

相关文章
  • JavaScript原型继承之基础机制分析 2014-02-08

    由于语言设计上的原因,JavaScript 没有真正意义上"类"的概念.而通常使用的 new 命令实例化对象的方法,其实是对原型对象的实例化. 这一语言功能的本质依赖于 JavaScript 特有的原型链(prototype chain)模式. 所以严格意义上说,JavaScript 是基于原型的面向对象语言.也就是说,每个实例对象都具有一个原型.对象从该原型中继承属性和方法. 1.构造函数 利用构造函数,可以简单地创建对象.构造函数内的 this 关键字指向实例对象本身: funct

  • JavaScript 原型继承之构造函数继承 2014-09-10

    JavaScript 是基于原型的面向对象语言.也就是说,每个实例对象都具有一个原型.对象从该原型中继承属性和方法.这一篇将具体说说构造函数的继承. 上回说到<JavaScript 原型继承之基础机制>,这一篇将具体说说构造函数的继承. 从一个简单的示例开始,创建描述人类的 People 构造函数: function People(){ this.race = '愚蠢的人类'; } 然后,创建描述黄种人的 Yellow 构造函数: 复制代码 代码如下: function Yellow(name

  • 再谈javascript原型继承 2014-06-30

    Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍<Javascript模式>中关于原型实现继承的几种方法,下面来一一说明下,在最后我根据自己的理解提出了一个关于继承比较完整的实现. 真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承. 原型与原型链 说原型继承之前还是要先说说原型和原型链,毕竟这是实现原型继承的基础. 在Javasc

  • JavaScript 原型继承 2014-04-05

    JavaScript 原型继承,学习js面向对象的朋友可以看看. Object.prototype JavaScript是基于原型继承的,任何对象都有一个prototype属性.Object.prototype是所有对象的根,并且不可改变. Object.prototype=null; alert(Object.prototype);//[object Object] Object与Object.prototype Object继承于Object.prototype,增加一个属性给Object.

  • 浅析JavaScript原型继承的陷阱 2015-01-18

    JavaScript和其它面向对象语言一样,对象类型采用引用方式.持有对象的变量只是一个地址,而基本类型数据是值.当原型上存储对象时,就可能有一些陷阱 JavaScript默认采用原型继承.虽然没有类(class)的概念,它的函数(function)可以充当构造器(constructor).构造器结合this,new可以构建出类似Java的类.因此,JavaScript通过扩展自身能模拟类式(class-based)继承. JavaScript和其它面向对象语言一样,对象类型采用引用方式.持有对

  • 浅析Javascript原型继承 推荐第1/2页 2014-09-17

    JS没有提供所谓的类继承,据说在2.0中要加入这种继承方式,但是要所有浏览器都实现2.0的特性那肯定又得N多年. JS没有提供所谓的类继承,据说在2.0中要加入这种继承方式,但是要所有浏览器都实现2.0的特性那肯定又得N多年.昨天看了crockford 的一个视频,里面讲解了一下JS的继承方式,按照PPT里面说的,一共分了三类:Prototypal,pseudoclassical,Parasitic Inheritance. 下面主要介绍一下原型继承:When a function object

  • javascript 原型继承介绍 2013-11-11

    最近接触了一下html5,当然,接触过html5的人都知道,html5也不过是提供一些新的标签而已,至于整下实现的核心,还是在javascript这里. 暑假还搞了ext4的web desktop,更多的也是javascript的东西.对于javascript,以前就只会document.getElementById()和alert(),现在才开始慢慢深入了解.如果本文有什么不对的地方,请指出. 关于javasript,它是基于对象的,因此,它没有类的概念,所以,如果要实现继承,也就只能是利用j

  • javascript类继承机制的原理分析 2013-11-21

    本文着重解析javascript类继承机制,让你从底层了解javascript是怎样实现"继承"这一概念的. 目前 javascript的实现继承方式并不是通过"extend"关键字来实现的,而是通过 constructor function和prototype属性来实现继承.首先我们创建一个animal 类 js 代码 var animal = function (){ //这就是constructor function 了 this .name = 'pipi'

  • javascript原型链继承用法实例分析 2015-02-08

    这篇文章主要介绍了javascript原型链继承用法,实例分析了javascript原型链继承中的技巧与相关注意事项,非常具有实用价值,需要的朋友可以参考下 本文实例分析了javascript原型链继承的用法.分享给大家供大家参考.具体分析如下: function Shape(){ this.name = 'shape'; this.toString = function(){ return this.name; } } function TwoDShape(){ this.name = '2D

  • javascript 原型链维护和继承详解 2013-10-24

    本文通过实例详细向我们分析了javascript原型链维护和继承的问题,十分的详尽,十分的全面,这里推荐给大家. 一.两个原型 很多人都知道javascript是原型继承,每个构造函数都有一个prototype成员,通过它就可以把javascript的继承演义的美轮美奂了. 其实啊,光靠这一个属性是无法完成javascript的继承. 我们在代码中使用的prototype完成继承在这里就不多说了.大家可以查一下资料. 另外一个看不见的prototype成员. 每一个实例都有有一条指向原型的pro

  • 深入理解javascript原型链和继承 2014-07-31

    这篇文章主要介绍了javascript原型链和继承的概念,以及使用原型链实现继承.经典继承.组合式继承.寄生组合式继承.非常实用,是篇非常不错的文章,这里推荐给大家. 在上一篇文章中,介绍了原型的概念,了解到在javascript中构造函数.原型对象.实例三个好基友之间的关系:每一个构造函数都有一个"守护神"--原型对象,原型对象心里面也存着一个构造函数的"位置",两情相悦,而实例呢却又"暗恋"着原型对象,她也在心里留存了一个原型对象的位置. j

  • JavaScript的原型继承详解 2015-03-24

    这篇文章主要详细介绍了JavaScript的原型继承的相关资料,十分详细,需要的朋友可以参考下 JavaScript是一门面向对象的语言.在JavaScript中有一句很经典的话,万物皆对象.既然是面向对象的,那就有面向对象的三大特征:封装.继承.多态.这里讲的是JavaScript的继承,其他两个容后再讲. JavaScript的继承和C++的继承不大一样,C++的继承是基于类的,而JavaScript的继承是基于原型的. 现在问题来了. 原型是什么?原型我们可以参照C++里的类,同样的保存了

  • [JavaScript]关于原型继承 2013-03-13

    1. 使用原型继承实现对象系统: " 对象系统"的继承特性,有三种实现方案,包括基于类( class-based ). 基于原型( prototype-based )和基于元类( metaclass-based ). JavaScript 没有采用我们像java.c++的类继承体 系,而是使用原型继承来实现对象系统.因此 JavaScript 没有"类 " ( Class ), 而采用一种名为"构造器 (Constructor) "的机制来实现类

  • 浅谈javascript的原型继承 2014-05-21

    javascript的继承在很多框架中都有运用,尤其是原型式继承.首先要理解一个概念,什么是原型式继承?所谓的原型式继承,就是在函数内部先创建一个临时性的构造函数,然后将传入的对象做这个构造函数的原型,最后返回这个临时类型的新实例 请看源码: function clone(o) { var F = function(){}; F.prototype = o; return new F(); } 首先看ext(4.1的1896行开始)的原型式继承. 复制代码 代码如下: var TemplateC

  • javascript 用原型继承来实现对象系统 2015-01-28

    对象系统中的继承特性有三种方式:基于类,基于原型,基于元类 javascript中,对象没有原型,而构造器有原型 原型的含义:如果构造器有一个原型对象 A,则由该构造器创建的实例都必然复制自A /*申明2个构造器*/ var flower=function(){ this.name="nokia"; } var flower2=function(){ this.age=22; } /*原型链*/ flower2.prototype=new flower(); /*根据刚才原型的定义,实

  • javascript 面向对象全新理练之原型继承 2015-02-18

    利用原型继承的关键有两步操作,需要的朋友可以参考下. 首先创建一个父类的实例化对象,然后将该对象赋给子类的 prototype 属性. 这样,父类中的所有公有实例成员都会被子类继承.并且用 instanceof 运算符判断时,子类的实例化对象既属于子类,也属于父类. 然后将子类本身赋值给它的 prototype 的 constructor 属性.(注意:这里赋值的时候是没有 () 的!) 这一步是为了保证在查看子类的实例化对象的 constructor 属性时,看到的是子类的定义,而不是其父类的

  • 分析游戏设计标准之基础机制 2014-09-09

    bricks from thegameprodigy.com Dave目前正在着手自己的大型独立游戏.他已把握题材和总体构思.这是款有关僵尸的动作/冒险游戏,玩家吸收受害者的血液.玩家得避免日光曝晒,游戏涉及浪漫爱情故事.听起来是款不错的游戏. 他向业内好友陈述自己的想法.他的激动之情溢于言表,他非常喜欢僵尸吸血这个游戏.但当好友问及: "玩家如何盗取血液?" Dave告知好友僵尸可以瞄准任何人,吸取他们的血液,这就是游戏的运作方式.但好友反复表示,"玩家点击什么按键?你如何

  • JavaScript学习笔记-原型继承 2012-09-06

    JavaScript基于原型的编程语言,本身并不包含内置的类实现.但是可以通过Javascript模拟出类 类 JavaScript中有构造函数和New运算符.构造函数用来实例对象和初始化属性.任何JavaScript函数都可以用作构造函数,构造函数必须使用new运算符作为前缀来创建新的实例 JavaScript要模拟一个类可以直接使用函数function var Person = function(name){ this.name = name; } //实例化Person var alice

  • JavaScript 垃圾回收机制分析 2014-09-14

    同C# .Java一样我们可以手工调用垃圾回收程序,但是由于其消耗大量资源,而且我们手工调用的不会比浏览器判断的准确,所以不推荐手工调用垃圾回收 在公司经常会听到大牛们讨论时说道内存泄露神马的,每每都惊羡不已,最近精力主要用在了Web 开发上,读了一下<JavaScript高级程序设计>(书名很唬人,实际作者写的特别好,由浅入深)了解了一下JavaScript垃圾回收机制,对内存泄露有了一定的认识. 和C#.Java一样JavaScript有自动垃圾回收机制,也就是说执行环境会负责管理代码执行

  • javascript关于继承的用法汇总 2014-05-31

    这篇文章主要介绍了javascript关于继承的用法,实例汇总了常见的javascript关于继承的用法,具有一定的参考借鉴价值,需要的朋友可以参考下 本文实例汇总了javascript关于继承的用法.分享给大家供大家参考.具体如下: 例子: /** * 实现子类继承父类,但不会产生多余的属性和方法 * @returns {Function} */ define(function(){ return function(subType, superType){ var proto = new Ob