Javascript中的原型继承机制

Javascript中的原型继承机制
This picture can roughly describe the prototype inheritance relationship.
Here are some code explanations for each relationship~~
/*
关于对象与原型机制综合说明:
1.JS中采用原型继承方式，所以呢每一个对象都有一个原型对象，最原始的原型为null
2.在JS中__proto__和constructor属性是对象独有的，prototype属性是函数独有的
2.在JS中，以任何方式创建的对象都有原型对象，可以通过__proto__属性来访问原型对象
3.在JS中，构造函数也是对象，并且构造函数的prototype属性和继承相关，实例化出来的
对象的__proto__就是构造函数的prototype属性
*/

/*************************对各个关系的解释*****************************/
//关系1
function Foo(userName,age){
    this.userName=userName;
    this.age=age;
}
Foo.prototype.sayHi=function(){
    console.log(this.userName+"say hi");
}
var f1=new Foo("lisi",20);
console.log(f1.__proto__===Foo.prototype);  //true
/*
    关系1:f1是通过构造函数Foo实例化出来的对象，所以f1对象的__proto__属性
    与其构造函数Foo的prototype属性相同，指向相同，通过Foo实例化得到的对象
    可以去Foo.prototype上查找方法，如sayHi方法
*/




//关系2
function Foo(userName,age){
    this.userName=userName;
    this.age=age;
}
console.log(typeof(Object.prototype)); //Object
console.log(Foo.prototype.__proto__===Object.prototype); //true
/*
    关系2：构造函数的prototype属性是个真实的对象，所以Foo.prototype存在原型，用__proto__表示，
           JS中Object可以视为一个函数，而Object.prototype就是一个对象，大部分的构造函数基本上
           都具有一个继承自Object.prototype的原型，所以关系2成立
*/




//关系3
console.log(typeof(Object.prototype)); //Object
console.log(Object.prototype.__proto__); //null
/*
    关系3: 原型链是指对象的原型链，因此原型链中全部为对象,Object.prototype在原型链中是个特殊的对象,它已不存在
          原型对象，因此Object.prototype.__proto__为null,我觉得可以理解为Object.prototype对象的原型对象 
          是空，因此等于null，同时这也是原型链中的尽头
*/




//关系4和关系5
function Foo(userName,age){
    this.userName=userName;
    this.age=age;
}
console.log(typeof(Foo.prototype)); //Object
console.log(Foo.prototype.constructor===Foo); //true
/*
    关系4: 正如在综述中所说，在JS中__proto__和constructor属性是对象独有的，prototype属性时函数独有的，
          并且构造函数的prototype属性和继承相关，而Foo是一个构造函数，所以存在Foo.prototype，并且它是
          一个对象
    关系5: constructor属性指创建此实例的构造器,只有对象才有这个属性，它是从一个对象指向一个函数（就是此对象通 
          过什么函数创建的）,所以Foo.prototype这个对象的constructor属性指向Foo函数
*/




//关系6
function Foo(userName,age){
    this.userName=userName;
    this.age=age;
}
console.log(Foo.__proto__===Function.prototype);
/*
    关系6: 在JS中函数也是一种对象，所以函数也拥有__proto__属性。在JS中Function构造函数能创建一个
           Function对象，实际上，每个函数都是一个Function对象
           所以呢，对于关系6，Foo本身定义为一个函数，但是它也可以视为一个由Function定义的对象，
           并且存在Foo.__proto__===Function.prototype
*/




//关系7
console.log(typeof(Function.prototype)); //function
console.log(Function.prototype.__proto__===Object.prototype);//true
/*
    关系7: 在JS中每一个函数对象都有一个显示的prototype属性,它代表了对象的原型
           但是Function.prototype函数对象是个例外，没有prototype属性。对其进行
           typeof判断，返回function，说明它被定义为函数，可将其视为对象，添加
           __proto__,此时Function.prototype.__proto__是一个对象，它与原型链最顶端
           的Object.prototype相同
*/




//关系8
var student=new Object();
student.Name="zhangsan";
student.age=18;
student.hobby=function(){
    console.log("football");
};
console.log(student); //会显示定义的student对象的详细信息
console.log(Object); //function
console.log(student.__proto__==Object.prototype);// true
/*
    关系8: 通过Object方法创建出的对象，它的原型就是Object方法的prototype
*/




//关系9和关系10
var student=new Object();
console.log(typeof(Object.prototype)); //Object
/*
    关系9:此处在创建student时，Object可视为一种用于创建对象的函数，对于函数Object()而言，存在prototype属性
          即为Object.prototype
    关系10:Object.prototype是一个对象，它的构造器为function Object(),也就是说这个对象是由函数function
          Object()构造出来的，constructor属性只有对象才拥有，然后根据前面的分析，Object.prototype.constr 
           uctor就是function Object();
*/




//关系11
console.log(typeof(Object)); //function
console.log(Object.__proto__===Function.prototype);
/*
    关系11: Object本身是一个函数，当然我们也可以把这个函数视为一个由Function定义的对象来看，
            所以就存在Object.__proto__=Function.prototype
*/




//关系12和关系13
console.log(typeof(Function)); //function
console.log(typeof(Function.prototype)); //function
/*
    关系12: 在JS中，每个函数都是一个Function对象，实际上，Function函数自身也是一个Function对象
            Function()视为函数来看，自然就存在Function.prototype
    关系13: Function.prototype在JS中是一个特殊的存在，它没有prototype属性，对其进行
           typeof判断，返回function,因而存在constructor属性，虽然它是函数，但也能作为对象来
           对象来看待，它由为function Function()函数构造出，所以Function.prototype.constructor=functi 
           on Function()
*/




//关系14
var Function=new Function();
/*
    关系14: 在JS中Function本身也可以是一个Function对象，所以存在Function对象的__proto__等于Function方法  
           的prototype
*/

Javascript中的原型继承机制

相关推荐