JavaScript中的原型链prototype介绍

JavaScript中的继承是通过原型链(prototype chain)来完成的：每个对象内部都有另外一个对象作为其prototype而存在，对象从这个prototype中继承属性(property)。对于每个对象来说，可以用以下三种方式来访问其原型对象：

1.__proto__。可以通过对象的__proto__属性来访问其原型对象。该属性仅在Firefox、Safari和Chrome中得到支持，在IE和Opera中不支持。

2.Object.getPrototypeOf()。可以将对象作为参数传入Object.getPrototypeOf()方法，执行后即返回对象的原型对象。此方法仅在ECMAScript 5标准中得到支持。

3.o.constructor.prototype。通过先获取对象的constructor函数，然后再通过访问constructor函数的prototype属性来访问到原型对象。使用此方法的前提为：对象中存在指向构造函数的constructor属性。

判断两个对象间是否存在原型链关系可以使用isPrototype()方法：

代码如下:

var p = {x:1};
var o = Object.create(p);
console.log(p.isPrototypeOf(o));//true

对于所有用字面量创建的对象而言，其prototype对象均为Object.prototype(作为一个特殊对象，Object.prototype没有原型对象)：

代码如下:

var x = {a:18, b:28};
console.log(x.__proto__);//Object {}

而对于所有用new操作符创建的对象而言，其prototype对象均为constructor函数的prototype属性：

代码如下:

var x = {a:18, b:28};
function Test(c){
  this.c = c;
}
Test.prototype = x;
var t = new Test(38);
console.log(t);//Object {c=38, a=18, b=28}
console.log(t.__proto__);//Object {a=18, b=28}
console.log(t.__proto__.__proto__);//Object {}

JavaScript中使用new操作符创建对象的过程如下：

1.创建一个新的空对象。
2.将这个对象的__proto__属性指向constructor函数的prototype属性。
3.将这个对象作为this参数，执行constructor函数。

从上述创建过程可以得出结论：所有从同一个constructor函数中构造出来的对象，其__proto__属性(也即其原型对象)相等，也就是说，只存在一个原型对象：

代码如下:

var t = new Test(38);
var t2 = new Test(68);
console.log(t === t2);//false
console.log(t.__proto__ === t2.__proto__);//true

赞 (0)

相关推荐

  • 深入学习JavaScript中的原型prototype

    深入学习JavaScript中的原型prototype

    javascript 是一种 prototype based programming 的语言, 而与我们通常的 class based programming 有很大 的区别,我列举重要的几点如下: 1.函数是first class object, 也就是说函数与对象具有相同的语言地位 2.没有类,只有对象 3.函数也是一种对象,所谓的函数对象 4.对象是按 引用 来传递的 那么这种 prototype based programming 的语言如何实现继承呢(OO的一大基本要素), 这也便是

  • JavaScript中的prototype原型学习指南

    JavaScript中的prototype原型学习指南

    原型是什么 Function 类型有一个属性 prototype,直接翻译过来就是原型.这个属性就是一个指针,指向一个对象,这个对象包含一些属性和方法,这些属性和方法会被当前函数生成的所有实例(对象)所共享. 这句话根据前面所说的,细细琢磨下来,就可以得到下面代码: function Person(){ ... } Person.prototype = { country : 'china', sayName : function(){ ... } } 先创建了一个 Function 类型的实例

  • JavaScript中的原型prototype完全解析

    JavaScript中的原型prototype完全解析

    要理解JS中的prototype, 首先必须弄清楚以下几个概念    1. JS中所有的东西都是对象 2. JS中所有的东西都由Object衍生而来, 即所有东西原型链的终点指向Object.prototype // ["constructor", "toString", "toLocaleString", "valueOf", "hasOwnProperty", "isPrototypeOf&q

  • js中使用使用原型(prototype)定义方法的好处详解

    经常在前端面试或是和其他同行沟通是,在谈到构造在JS定义构造函数的方法是最好使用原型的方式:将方法定义到构造方法的prototype上,这样的好处是,通过该构造函数生成的实例所拥有的方法都是指向一个函数的索引,这样可以节省内存. 当然,这种说法没有任何问题,只是在实现上,并非只有使用prototype的方式才能达到这样的效果,我们可以将方法以函数的形式定义在构造函数之外,然后在构造函数中通过this.method = method的方式,这样生成的实例的方法也都通过索引指向一个函数,具体如下:

  • 浅谈js构造函数的方法与原型prototype

    把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况我们简称为prototype上的方法. •函数内的方法: 使用函数内的方法我们可以访问到函数内部的私有变量,如果我们通过构造函数new出来的对象需要我们操作构造函数内部的私有变量的话, 我们这个时候就要考虑使用函数内的方法. •prototype上的方法: 当我们需要通过一个函数创建大量的对象,并且这些对象还都有许多的方法的时候;这时我们就要考虑在函数的prototype上添加这些方法. 这种情况下我们代码的

  • 跟我学习javascript的prototype原型和原型链

    跟我学习javascript的prototype原型和原型链

    用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱. 每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和

  • JavaScript中的原型链prototype介绍

    JavaScript中的继承是通过原型链(prototype chain)来完成的:每个对象内部都有另外一个对象作为其prototype而存在,对象从这个prototype中继承属性(property).对于每个对象来说,可以用以下三种方式来访问其原型对象: 1.__proto__.可以通过对象的__proto__属性来访问其原型对象.该属性仅在Firefox.Safari和Chrome中得到支持,在IE和Opera中不支持. 2.Object.getPrototypeOf().可以将对象作为参

  • JavaScript中关联原型链属性特性

    数据属性: 数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 4个描述的行为特性: writable 表示能否修改属性的值.默认为true Enumerable 表示能否过过for in循环返回属性是否可以枚举. configuralbe 表示是否能过来delete删除属性从来重新定义属性,能否修改其配置. value 包含这个属性的数据值.读取属性值的时候,从这个位置读取. 写入属性值的时候,把新值保存在这个位置.这个特性的默认值为true. <script> function F

  • javascript中的原型链深入理解

    要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言.类有一个很重要的特性,就是它可以根据它的构造函数来创建以它为模板的对象.在javascript中,函数就有2个功能 第一. 作为一般函数调用 第二. 作为它原型对象的构造函数 也就new() 我们来看一个例子 复制代码 代码如下: function a(){ this.name = 'a'; } 当创建一个函数,它会发生什么呢? 第一.它会创建1个函数对象 也就是a

  • 基于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中的原型对象

    一.什么是原型 原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承. 1.1 函数的原型对象 ​ 在JavaScript中,我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B,而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即:prototype的属性的值是这个对象 ).这个对象B就是函数A的原型对象,简称函数的原型.这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说:c

  • javaScript中的原型解析【推荐】

    最近在学习javaScript,学习到js面向对象中的原型时,感悟颇多.若有不对的地方,希望可以指正. js作为一门面向对象的语言,自然也拥有了继承这一概念,但js中没有类的概念,也就没有了类似于java中的extends,所以,我觉得js中的继承主要依赖于js中的原型(链). 那么,原型是什么呢?我们知道js中函数亦是一种对象,当我们创建一个函数时,其实这个函数也就默认的拥有了一个属性叫做prototype,这个属型叫做原型属性,他是一个指针,指向了这个函数的原型对象,这个原型对象有一个默认的

  • JavaScript中的原型和继承详解(图文)

    JavaScript中的原型和继承详解(图文)

    请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans 原型车.这些车虽然是由"奥迪"或"标致"这些厂商制造的,可它们并不是你在街上或速公路上所见到的那类汽车.它们是专为参加高速耐力赛事而制造出来的. 厂家投入巨额资金,用于研发.设计.制造这些原型车,而工程师们总是努力尝试将这项工程做到极致.他们在合金.生物燃料.制动技术

  • 原型和原型链 prototype和proto的区别详情

    目录 1.原型 2.原型链 2.1 constructor构造函数 2.2 call/apply 2.3 new() 1.原型 原型是function对象下的属性,它定义了构造函数的共同祖先,也就是一个父子级的关系,子对象会继承父对象的方法和属性 prototype是函数下的属性,对象想要查看原型使用隐式属性__Proto__ constructor指向构造函数 自己身上有属性,原型上也有属性,取近的,用自己的 通过给原型添加属性,可以让所有的实例化对象共享属性和方法 Car.prototype

  • JavaScript中setter和getter方法介绍

    javascript中的setter.getter是平时接触比较少的方法,其本身也并不是标准方法,只在非ie浏览器里支持(ie内核也许有其他方法可以做到呢?暂时不知其解),但是加以利用可以做许多事情,比如: 1.对数据的访问限制: a.value是对value变量的getter方法调用,如果在getter方法实现中抛出异常,可以阻止对value变量的访问 2.对dom变量进行监听: window.name是一个跨域非常好用的dom属性(大名鼎鼎,详见百度),如果覆盖window.name的set

  • 基于JavaScript中标识符的命名规则介绍

    JavaScript中的标识符的命名有以下规则: 由字母.数字.$._组成 以字母.$._开头 不可以使用保留字!!! 要有意义!!!!!!! 标识符的命名规范: 1.驼峰命名法 除标识符的第一个单词外,其余单词的首字母大写,例如:trueName 2.蛇型命名法 单词之间用_隔开,例如:true_name (注:大多数情况下,以1~2个下划线开始的标识符,代表特殊变量或内部变量,我们在自己定义的时候,尽量避免使用以下划线开头的变量) (粗浅的见解,望批评指正) 以上这篇基于JavaScript

随机推荐