深入了解原型和原型链

74 阅读2分钟

一.创建对象

函数对象是通过Function对象创建的
function fun(){} 
//var fun = new Function()  

普通对象是通过Object对象创建的
var obj2 = new Object();

构造函数创建object
function Person(name,age){
    this.name = name;
    this.age = age;
    this.say=function(){
        console.log('我是'+this.name) 
    }
}
var p1 = new Person("张三",18);
var p2 = new Person("李四",20);

二.原型和原型链

1.万物皆对象 万物皆空null
2.原型:保存所有子对象的共有属性值和方法的父对象
原型链:由各级子对象的__proto__属性连续引用形成的结构
3.三个属性:__proto__、constructor、prototype 
__proto__:js所有对象都会携带,在js中凡是__开头和结尾的都是js内部属性
例子:
    //构造函数实现类
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.say = function(){
            console.log("你好我是"+this.name)
        }
    }
    //在原型上定义的方法和内部的方法的区别:
    //挂载在函数内部的方法,实例化对象内部会赋值给构造函数的方法
    //挂载到原型上的方法,不会去赋值。
    //挂载到内部和原型上的方法都可以通过实例去调用
    //如果需要访问构造函数内部的私有变量,可以定义在函数内部。其他情况我们可以定义在函数的原型上
    Person.prototype.money = 20;
    Person.prototype.run = function(){
        console.log("跑步")
    }
    //当函数创建的时候就会携带上一个prototype属性,这个属性指向prototype对象,也就是原型对象
    原型对象创建完后会挂载一个constructor 
    这个constructor指向Person 
    console.log(Person.prototype.constructor === Person)
    实例化Person对象:
        var p1 = new Person("张三",18);
        var p2 = new Person("李四",20);
        p1.__proto__ === Person.prototype
        Person.prototype.constructor === Person

四.Function和Object之间的关系

 function Person(name,age){} 
 var p1 = new Person("张三",18);
 当创建Person构造函数的时候就会挂载prototype属性,创建完后会挂载一个constructor 
 Person.prototype.constructor === Person
 p1实例化对象上面有个__proto__属性指向Person.prototype
 p1.__proto__ === Person.prototype
 
 再函数对象是由Function构造出来的
 Person的__proto__属性指向Function.prototype
 Object的__proto__属性指向Function.prototype
 Function.prototype的__proto__属性指向Object.prototype 
 Function.__proto__指向Function.prototype
 Object的prototype属性指向Object.prototype
 Object.prototype.constructor === Object
 Object.prototype的__proto__属性指向null
 
 Function对象和Object对象之间的关系:
     Function是顶层的构造器 Object是顶层的对象
     顶层有null Object.prototype Function.prototype Function
     从原型上来说:Function继承了Object 
     构造器来说:Function构造了Object  function Object(){} new Object()
     hasOwnProperty:obj.hasOwnProperty('属性名') 检测obj里面是否有这个属性

22.jpg