关闭

js 原型链

标签: javascript对象prototypejs标准
467人阅读 评论(0) 收藏 举报
分类:

说到prototype,就不得不先说下new的过程。

我们先看看这样一段代码:

    <script type="text/javascript">
        var Person = function () { };
        var p = new Person();
    script>

很简单的一段代码,我们来看看这个new究竟做了什么?我们可以把new的过程拆分成以下三步:

<1> var p={}; 也就是说,初始化一个对象p。

<2> p.__proto__=Person.prototype;

<3> Person.call(p);也就是说构造p,也可以称之为初始化p。

关键在于第二步,我们来证明一下:

    <script type="text/javascript">
        var Person = function () { };
        var p = new Person();
        alert(p.__proto__ === Person.prototype);
    script>

这段代码会返回true。说明我们步骤2的正确。

那么__proto__是什么?我们在这里简单地说下。每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样一直找下去,也就是我们平时所说的原型链的概念。

按照标准,__proto__是不对外公开的,也就是说是个私有属性,但是Firefox的引擎将他暴露了出来成为了一个共有的属性,我们可以对外访问和设置。

好,概念说清了,让我们看一下下面这些代码:

    <script type="text/javascript">
        var Person = function () { };
        Person.prototype.Say = function () {
            alert("Person say");
        }
        var p = new Person();
        p.Say();
    script>

这段代码很简单,相信每个人都这样写过,那就让我们看下为什么p可以访问Person的Say。

首先var p=new Person();可以得出p.__proto__=Person.prototype。那么当我们调用p.Say()时,首先p中没有Say这个属性,于是,他就需要到他的__proto__中去找,也就是Person.prototype,而我们在上面定义了Person.prototype.Say=function(){}; 于是,就找到了这个方法。

好,接下来,让我们看个更复杂的。

    <script type="text/javascript">
        var Person = function () { };
        Person.prototype.Say = function () {
            alert("Person say");
        }
        Person.prototype.Salary = 50000;
        var Programmer = function () { };
        Programmer.prototype = new Person();
        Programmer.prototype.WriteCode = function () {
            alert("programmer writes code");
        };
        Programmer.prototype.Salary = 500;
        var p = new Programmer();
        p.Say();
        p.WriteCode();
        alert(p.Salary);
    script>

我们来做这样的推导:

var p=new Programmer()可以得出p.__proto__=Programmer.prototype;

而在上面我们指定了Programmer.prototype=new Person();我们来这样拆分,var p1=new Person();Programmer.prototype=p1;那么:

p1.__proto__=Person.prototype;

Programmer.prototype.__proto__=Person.prototype;

由根据上面得到p.__proto__=Programmer.prototype。可以得到p.__proto__.__proto__=Person.prototype。

好,算清楚了之后我们来看上面的结果,p.Say()。由于p没有Say这个属性,于是去p.__proto__,也就是Programmer.prototype,也就是p1中去找,由于p1中也没有Say,那就去p.__proto__.__proto__,也就是Person.prototype中去找,于是就找到了alert(“Person say”)的方法。

其余的也都是同样的道理。

这也就是原型链的实现原理。

最后,其实prototype只是一个假象,他在实现原型链中只是起到了一个辅助作用,换句话说,他只是在new的时候有着一定的价值,而原型链的本质,其实在于__proto__!

0
0
查看评论

JS重点整理之JS原型链彻底搞清楚

彻底搞清楚原型链。看图理解原型链。从对象、原型对象、原型链进行一步步分析,每一块都有根据自己的理解画图,更容易理解,又有例子代码佐证。 最普通的对象:有__proto__属性(指向其原型链),没有prototype属性。原型对象(person.prototype 原型对象还有constr...
  • sinat_21274091
  • sinat_21274091
  • 2016-10-06 01:58
  • 9251

浅析JavaScript原型链与原型链式继承

原型链与原型链式继承上篇总结了下JavaScript的作用域链的问题,欢迎拍砖!浅析JavaScript作用域链继上篇总结中提出的情况 同样都是链,但这两个链往上追朔的顶点是不一样的;并且为了增强我们对js继承的理解。 总结一下JavaScript原型链的问题。prototype属性首先我们要知...
  • SirM2z
  • SirM2z
  • 2016-01-10 20:44
  • 1102

JS高级---原型链(一看就懂,但18岁以下请绕道)

1)小明是小明妈生的,小狗是小狗妈生的。小明和小狗都是对象实例,而小明妈和小狗妈就是原型。原型也是对象,叫原型对象。      2)小明妈和小明爸啪啪啪能生出一堆小明明、小狗妈和小狗爸啪啪啪能生出一堆小狗狗,啪啪啪就是构造函数,俗称造人或造狗。 ...
  • xiaotao_css
  • xiaotao_css
  • 2017-05-27 16:14
  • 1546

javascript 原型、原型链、对象复制等原理和示例分析(下)

原型 原型是 JavaScript 面向对象特性中重要的概念,也是大家太熟悉的概念。因为在绝大多 数的面向对象语言中,对象是基于类的(例如 Java 和 C++ ) ,对象是类实例化的结果。而在 JavaScript 语言中,没有类的概念 ① ,对象由对象实例化。打个比方来说,基于类的语言中...
  • luozhonghua2014
  • luozhonghua2014
  • 2015-05-09 13:23
  • 985

【JavaScript】5.面试题一原型和原型链

一、题目 1、如何准确判断一个变量是数组类型? var array=[]; console.log(array instanceof Array);//true 判断引用类型的具体类型要用instanceof console.log(typeof array);//Obj...
  • benben513624
  • benben513624
  • 2017-09-28 07:03
  • 691

深入理解JS继承和原型链

对于那些熟悉基于类的面向对象语言(Java 或者 C++)的开发者来说,JavaScript 的语法是比较怪异的,这是由于 JavaScript 是一门动态语言,而且它没有类的概念( ES6 新增了class 关键字,但只是语法糖,JavaScript 仍旧是基于原型)。 涉及到继承这...
  • zls986992484
  • zls986992484
  • 2016-12-17 11:18
  • 3014

彻底理解javascript中的原型链

要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言。类有一个很重要的特性,就是它可以根据它的构造函数来创建以它为模板的对象。在javascript中,函数就有2个功能 第一、 作为一般函数调用 第二、 作为它原型对象的构造...
  • ljl157011
  • ljl157011
  • 2014-02-22 13:38
  • 12510

原型与原型链的常见面试题

//测试题1 var A=function(){} A.prototype.n=1 var b=new A() A.prototype={ n:2, m:3 } var c=new A() console.log(b.n,b.m,c.n,c.m)//1,undefined,2,3 ...
  • m0_37667797
  • m0_37667797
  • 2017-10-27 09:04
  • 376

js的原型链使用

我们大家都在用prototype的时候扩展的方法不想外部提供的时候可以写保护,想c java的private public ,我们js也是可以做到的,如下例 var c= function(x, y) { this.x = x; this.y = y; }; c.protot...
  • korewang
  • korewang
  • 2013-12-04 10:21
  • 308

JavaScript的原型原型链的深刻理解及运用

JavaScript的prototype原型和__proto__原型链,了解这俩对我们深刻理解 js ,封装常用小技巧很有帮助。ES5中js本身是没有类的,在ES5中js类就是函数function,而function本身也是对象。一、js中的继承是通过原型链 __proto__来实现的,对象与对象以...
  • webxiaoma
  • webxiaoma
  • 2017-03-25 19:24
  • 683
    个人资料
    • 访问:348519次
    • 积分:4958
    • 等级:
    • 排名:第6784名
    • 原创:175篇
    • 转载:49篇
    • 译文:4篇
    • 评论:47条
    文章分类