zoukankan      html  css  js  c++  java
  • javascript原型对象、原型链、构造函数

    1、原型对象(原型)、原型链

      先放一张在网上看到的关于原型和原型链的图,非常不错。

      如果你能看懂,那就对原型链有了一定了解,如果看不懂,对照下面这几点来看图:

    1. js中所有函数都有一个prototype属性,这个属性引用了一个对象(fun.prototype),即原型对象,也简称为原型(下面都称原型)
    2. 所有原型都有constructor属性和__proto__属性
    3. constructor属性指向原函数(方法)
    4. __proto__属性指向自己的继承父类 (即它的构造函数的原型
    5. 第四点得到的结果,又回到了第二点,这样就构成了原型链。
    6. js中一切皆对象,而对象都有一个__proto__属性,这也解释了原型为什么有这个属性。
    7. Object.prototype的_proto_指向null(最顶级的原型对象),所有原型链的最顶层都是Object.prototype
    8. 补充:
      1. instanceof 运算符:A instanceof B  检查 A的原型链上是否存在B.prototype。
        console.log([1,2,3] instanceof Array);        // true
        console.log([1,2,3] instanceof Object);       // true

        深入了解instanceof : JavaScript instanceof 运算符深入剖析

      2. Function是最顶层的构造方法,所有对象都由Function方法构造,包括Object方法,Function方法。
        console.log(Object instanceof Function);                        //true
        console.log(Function instanceof Function);   //true
        (上图可以看出三个函数对象的__proto__都指向了Function.prototype)
      3. Object对象和Function方法是相互依赖的
        alert(Function instanceof Object);                                // true

         和2对比,可以看出。

      4. 原型链只有在检索值的时候才会用到,如果我们尝试去获取对象的某个属性值,但该对象没有此属性值,那么js就会在其原型对象中找,如果还没有,那么再从它的原型中找,直到Object.prototype,如果该对象原型链中也没有找到,则返回undefined。

       Object.create方法

        内部原理:

         if(typeof Object.beget !== 'function') {
                Object.create = function(o) {
                    var F = function () {};
                    F.prototype = o;
                    return new F();
                }
            }

      这个方法创建一个使用原对象作为其原型的新对象。

         var obj = {
                'a': 'a',
                'b': 'b'
            }
            var obj1 = Object.create(obj);
            obj1.__proto__.c = 'c';
         console.log(obj);            // {a:'a',b:'b',c:'c'}    可以看出obj1使用obj作为其构造函数原型

      用途:在工厂函数中,将相同的属性和方法放在构造函数的原型链中,不同的放在构造函数中。

    2、构造函数

    function Foo() {}
    var foo = new Foo();

      1、构造函数也是函数,未了区分,构造函数的函数名首字母大写。(不是必须,但最好)

      2、new的内部实现原理:(建议理解原型和原型链,在返回来看这个)

           var foo = {};
        foo.__proto__ = Foo.prototype;
        Foo.call(foo);     

      通过上面的代码可以看出:通过实例化构造函数,所生成的对象,它的继承父类(foo.__proto__)就是构造函数的原型(Foo.prototype)。

    function Foo () {
        this.a = 'a';
        this.b = 'b';
    }
    var obj1 = new Foo();
    var obj2 = {
        a: 'a',
        b: 'b'   
    }
    console.log(‘obj1的构造函数是: ’ + obj1.__proto__.constructor);        // obj1的构造函数是: function Foo () { this.a = 'a'; this.b = 'b';}
    console.log(‘obj2的构造函数是: ’ + obj2.__proto__.constructor);        // obj2的构造函数是: function Object() { [native code] }
  • 相关阅读:
    SD_WebImage-03-多线程+下载任务放入非主线程执行
    NSOperationQueue_管理NSOperation-02-多线程
    CALayer小结-基本使用00-UI进阶
    XMPP-UI进阶-01
    XMPP总结-UI进阶-00
    UI控件总结-UI初级
    转场动画-01-day4
    暂停-开始动画-核心动画-08-day4
    核心动画-04-CALayer隐式动画
    Android开发技术周报 Issue#71
  • 原文地址:https://www.cnblogs.com/seeks/p/7724444.html
Copyright © 2011-2022 走看看