zoukankan      html  css  js  c++  java
  • JS原型链

    JS每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链。
    访问一个对象的原型可以使用ES5中的Object.getPrototypeOf方法,或者ES6中的__proto__属性。
    原型链的作用是用来实现继承,比如我们新建一个数组,数组的方法就是从数组的原型上继承而来的。
    在JavaScript中,每个函数 都有一个prototype属性,当一个函数被用作构造函数来创建实例时,这个函数的prototype属性值会被作为原型赋值给所有对象实例(也就是设置 实例的`__proto__`属性),也就是说,所有实例的原型引用的是函数的prototype属性。
    在JavaScript的原型对象中,还包含一个”constructor”属性,这个属性对应创建所有指向该原型的实例的构造函数。
    ”Object.prototype”的值就是”Object {}”这个原型对象。反过来,当访问”Object.prototype”对象的”constructor”这个属性的时候,就得到了Obejct函数。
    另外,当通过”Object.prototype._proto_”获取Object原型的原型的时候,将会得到”null”,也就是说”Object {}”原型对象就是原型链的终点了。
    Function对象作为一个函数,就会有prototype属性,该属性将对应”function () {}”对象。
    Function对象作为一个对象,就有__proto__属性,该属性对应”Function.prototype”,也就是说,”Function._proto_ === Function.prototype”。
    几点理解
    1.Object.__proto__ === Function.prototype // true
      Object是函数对象,是通过new Function()创建,所以Object.__proto__指向Function.prototype。

    2.Function.__proto__ === Function.prototype // true
      Function 也是对象函数,也是通过new Function()创建,所以Function.__proto__指向Function.prototype。

    3.Function.prototype.__proto__ === Object.prototype //true
    Function.prototype是个函数对象,理论上他的__proto__应该指向 Function.prototype,就是他自己,自己指向自己,没有意义,指向Object.prototype,Object.prototype.__proto__ === null,保证原型链能够正常结束。
    遍历原型链
    我们没有办法遍历到所有以某个对象为原型的对象,但我们可以向上遍历,获取到一个对象所有的上层原型,这个原型链必定是线性的,尽头是null。
    function getPrototypeChain(object) {
        var protoChain = [];
        while (object = object.__proto__) {
            protoChain.push(object);
        }
        protoChain.push(null);
        return protoChain;
    }
    试验一下,不同的环境实现不同,显示形式也不同.下面是在chrome控制台中的显示.

    >getPrototypeChain(new String(""))
    [String, Object, null]                     //依次是String.prototype,Object.prototype,null
      
    >getPrototypeChain(function(){})
    [function Empty() {}, Object, null]        //依次是Function.prototype,Object.prototype,null
    内置类型的对象的原型链并不长,下面试试宿主对象.

    >getPrototypeChain(document.createElement("div"))
    [HTMLDivElement, HTMLElement, Element, Node, Object, null]

    构造超长原型链
    可以看出来,我们平时使用的对象并没有很长的原型链.但可以自己构造一个.

    function Foo() {}
    for (var i = 0; i < 100; i++) {
        Foo.prototype["foo" + i] = i;
        Foo.prototype = new Foo;
    }
    console.dir(getPrototypeChain(new Foo));





  • 相关阅读:
    Python 爬虫js加密破解(一) 爬取今日头条as cp 算法 解密
    Python 爬虫实例(2)—— 爬取今日头条
    Python 爬虫实例(1)—— 爬取百度图片
    python 操作redis之——HyperLogLog (八)
    python 操作redis之——有序集合(sorted set) (七)
    Python操作redis系列之 列表(list) (五)
    Python操作redis系列以 哈希(Hash)命令详解(四)
    Python操作redis字符串(String)详解 (三)
    How to Install MySQL on CentOS 7
    Linux SSH远程文件/目录 传输
  • 原文地址:https://www.cnblogs.com/doit8791/p/5742932.html
Copyright © 2011-2022 走看看