zoukankan      html  css  js  c++  java
  • javascript 原型机制

    JavaScript 原型链

    prototype,__proto__,constructor

    在 JavaScript 原型继承结构里面,规范中用 [[Prototype]] 表示对象隐式的原型,在 JavaScript 中用 __proto__ 表示,并且在 Firefox 和 Chrome 浏览器中是可以访问得到这个属性的,但是 IE 下不行。所有 JavaScript 对象都有 __proto__ 属性,但只有 Object.prototype.__proto__ 为 null,前提是没有在 Firefox 或者 Chrome 下修改过这个属性。这个属性指向它的原型对象。 至于显示的原型,在 JavaScript 里用 prototype 属性表示。

    /**
    * 声明构造函数Person,创建Person的实例p
    */
    var Person = function () { };
    var p = new Person();
    
    //等价于:
    var p = {}; //初始化一个对象p
    p.__proto__ = Person.prototype; //
    Person.call(p); //初始化p 

    证明一下:

    var Person = function () { };
    var p = new Person();
    p.__proto__ === Person.prototype; // true

    每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。默认情况下prototype属性会默认获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针,有些绕了啊,写代码、上图!  

    根据上图可以看出Person对象会自动获得prototyp属性,而prototype也是一个对象,会自动获得一个constructor属性,该属性正是指向Person对象。

    当调用构造函数创建一个实例的时候,实例内部将包含一个内部指针(很多浏览器这个指针名字为__proto__)指向构造函数的prototype,这个连接存在于实例和构造函数的prototype之间,而不是实例与构造函数之间。

    Function,Object

    function f1(){}
    var f2 = function(){}
    var f3 = new Function('str','console.log(str)');
    f1 instanceof Function //true
    
    f2 instanceof Function //true
    
    f3 instanceof Function //true
    
    Object instanceof Function   //true
    Function instanceof Function //true
    
    Object.__proto__ === Function.prototype   //true
    Function.__proto__ === Function.prototype //true

    f1、f2、f3为函数但是其实函数也是对象,是Function的实例。

    Function , Object 都是函数引用,由Function创建出来,所有均有__proto__属性,指向Function.prototype。

    总结

    每一个函数都有prototype这个显示属性,这个属性是一个引用,指向一个对象,这个对象包含一个属性constructor,指向prototype属性所在的函数的指针。

    每一个实例都有一个__proto__这个隐藏属性,这个属性指向实例构造函数的prototype属性。

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

  • 相关阅读:
    sax解析xml案例二
    mysql之删除重复数据
    Android之Intent探究
    struts2之Action名称的搜索顺序
    struts2自定义拦截器二——模拟session超时的处理
    struts2之防止表单重复提交
    Android之日期及时间选择对话框
    sax解析xml案例一
    Android之单选按钮对话框
    查询修改nls_database_parameters系统配置
  • 原文地址:https://www.cnblogs.com/chenqf/p/3735819.html
Copyright © 2011-2022 走看看