zoukankan      html  css  js  c++  java
  • js函数prototype属性学习(二)

    继续探讨js对象的prototype属性,前面已经看到在创建完一个对象之后,随时都会有一个_proto_属性伴随所有,那么,这个_proto_又是用来干嘛的,面试时问的高大上的原型链又是怎么回事?

    拿出前面已经有的例子,如下:

    function Person(name){

      this.name = name;

      this.interduceSelf= function(){

        alert("my name is " + this.name);

      };

    };

    Person.prototype.interduceSelfChinses = function(){

      alert("我的名字是 " + this.name);

    };

    从这个例子可以看出,通过给person.prototype设置了一个函数对象的新方法,那有person实例(例中:person1)出来的普通对象就继承了这个新方法。接着看了下这两个东西:person1.__proto__和Person.prototype,截图如下:

    二者压根就是同一个东西嘛,同时,我试验了person1.__proto__ == Person.prototype,结果为true,因此,我大胆推测构造函数new Person()发生时候的一个过程,

    创建person1对象;

      person1.__proto__ = Person.prototype;  

      Person.call('xiaoming');

    同样,person.prototype对象也有__proto__属性,它指向创建它的函数对象(Object)的prototype;

    person.prototype.__proto__ === Object.prototype //结果也还是 true

    继续,Object.prototype对象也有__proto__属性,但它比较特殊,为null;

    Object.prototype.__proto__; //结果为null

    我们把这个由__proto__串起来的直到Object.prototype.__proto__为null的链叫做原型链,如下图:

    __proto__按照定义来讲,是对象自带的一个属性,这个__proto__它本身又是一个对象,__proto__的属性,可以被person1读取到,但不会显示在person1对象里(是一个看起来对外隐身的属性),当然__proto__对象中的属性读取优先级要低于person1本身(一般视作隐秘属性,可以拿来用,但不必单独指定它)

      而prototype呢,则是函数的一个自带属性,其中prototype又有两个元素,constructor和__proto__,

        1、constructor指向函数本身;即

          Person.prototype.constructor === Person  //结果是true
            Function.prototype.constructor === Function  //结果是true
            Object.prototype.constructor === Object  //结果是true

        2、__proto__指向的是创建它的那个对象的prototype,即

          person1.__proto__ == Person.prototype  //结果是true

      构造函数在创建对象是最大的特点就是会把自身的prototype按值传递给被构造对象的__proto__,那么,在上面那段代码中,执行new Person()时,一下子指定了好几个对象的prototype和__proto__,请看如下的结构图:

    由此可以做出如下总结:

    1.原型和原型链是JS实现继承的一种模型,对对的,这么多看起来毫不相干的对象,通过原型、原型链,竟然给连成了亲家;

    2.原型链的形成是真正是靠__proto__ 而非prototype,这点也毋庸置疑,从上面可以看出,整个链关系里,prototype充当的角色是连接点,而真正起绳索连接作用的却是__proto__。

    看一个例子:

    function code(){};

    function javascript(){};

    code.languageType = "interpreted language";
    javascript.prototype = code;
    var jquery = new javascript();


    console.log(javascript.languageType) //结果是 undefined
    console.log(jquery.languageType) // 结果是 interpreted language

    不了解这个原型和原型链,还真有点丈二和尚摸不着头脑,现在来探讨一下:

    javascript函数对象虽然指定了prototype属性是code,但它的__proto__内置属性却没有指定是谁,同时,原型链跟prototype属性八竿子打不着,而是依赖__proto__去查找,当然查找不到任何东西,因此,这里找不到languageType这个属性值;

    jquery函数对象就不一样了,它在创建伊始就默认的指定了它的__proto__内置属性即为javascript.prototype,也即是code,code对象的languageType属性是有值的,也即是interpreted language,因此就读取到了属性值。

  • 相关阅读:
    开始学习编写用于 Windows SideShow 设备的小工具【转】
    Windows Mobile 6.5 Developer Tool Kit 下载
    Microsoft Security Essentials 微软免费杀毒软件下载
    SQL Server 2008 空间数据存储摘抄(SRID 点 MultiPoint LineString MultiLineString 多边形 MultiPolygon GeometryCollection)
    Vista Sidebar Gadget (侧边栏小工具)开发教程 (2)
    Vista Sidebar Gadget (侧边栏小工具)开发教程 (4)
    负载测试、压力测试和性能测试的异同
    Windows Server 2008 Vista Sidebar Gadget (侧边栏小工具) 入门开发实例
    Silverlight Tools 安装失败 解决办法
    SQL Server 2008 空间数据库 空间索引概念及创建(取自帮助)
  • 原文地址:https://www.cnblogs.com/xiangxiao/p/6683539.html
Copyright © 2011-2022 走看看