简单粗暴理解js原型

一直以来对 js 原型不是很了解,总是忘了又看看了有忘,没有一个总体的了解,今天画了一张原型图,方便自己理解,希望对又看到的同学有所帮助


个人感觉,学习js原型对照链表的理解困难可能会好一点


一段简单的js代码

function A(x){
        this.x = x;
    }
var obj = new A(1);
简单粗暴理解js原型_第1张图片



测试代码:

    console.log(A);//function A(x){this.x=x;}
    console.log(obj);//A {x: 1}
    console.log(A.prototype);//Object {constructor: function}
    console.log(obj.__proto__);//Object {constructor: function}
    console.log(A.prototype === obj.__proto__);
    console.log(A.prototype.constructor === obj.constructor);//true
    console.log(A === obj.constructor)//true


    console.log(A.constructor);//function Function() { [native code] }
    console.log(A.__proto__);//function () { [native code] }


    console.log(A.prototype.prototype)//undefined
    console.log(A.prototype.__proto__);//Object {__defineGetter__: function, __defineSetter__: function, hasOwnProperty: function, __lookupGetter__: function, __lookupSetter__: function…}

    var obj2 = new Object();
    console.log(A.prototype.__proto__.__proto__);//null
    console.log(A.prototype.__proto__.constructor);//function Object() { [native code] }
    console.log(A.prototype.__proto__.constructor === obj2.constructor);//true
    console.log(A.prototype.__proto__ === obj2.__proto__);//true
    console.log(A.prototype.__proto__.constructor.prototype === A.prototype.__proto__);//true

    console.log(Object.constructor);//function Function() { [native code] }
    console.log(Object.__proto__);//function () { [native code] }


哪里有不对的还请多多指教!

你可能感兴趣的:(javascript)