JavaScript原型详情

JavaScript原型详情

如果我们想要搞清楚JavaScript的原型,首先我们需要搞清楚以下几个概念
1.函数:函数就是一个js中的代码块,它的定义方式就是function 函数名(){ };
2.构造函数:它和普通函数本身并没有什么区别,但我们通过new 来调用时,我们就叫它构造函数,它的首字母一般大写
3.对象:js中所用的东西全为对象(数组,函数,字符串…)
4.实例对象:通过new来创建的对象,实例对象.
5.原型对象:当我们创建一个函数的时候,这个函数就会有一个prototype对象属性,这个对象属性去指向另一个对象,而这个对象我,我们就称他为原型对象.****

    function Person() {
       
    };//这里的Person()就是一个普通函数
    var p = new Person(); //而这里的Person()就是一个构造函数
    console.log(Person.prototype); // Object{} 
    console.log(p.prototype); //undefined

这里的p就是一个实例对象(也就是new Person())
了解清除了这几个概念,我们来深入理解原型对象

首先我们知道了,只要我们创建一个函数,他就会有一个prototype的属性,而这个属性指向原型对象,这这个原型对象中也有一个属性constructor,这个属性指向创建他的原型对象的构造函数.

用图表示:

而在我们创建对象的时候,都有一个叫做 proto 的内置属性，用于指向创建它的构造函数的原型对象。
用图表示:

进行验证:

    function Person() {
       
    }
    var p = new Person()
    console.log(Person.prototype); // Object{} 
    console.log(p.prototype); // undifined
    console.log(p.constructor); //function Person(){}    
    此处的p是通过 Person函数构造出来的，所以p的constructor属性指向Person
    console.log(Person.constructor); //function Function(){}
    console.log(p.__proto__ === Person.prototype) //ture
    console.log(Person.prototype.constructor === Person) //ture
    console.log(Person.prototype.constructor === p) //false

他们之间的关系:

1）构造函数、原型和实例的关系

①函数都有一个属性prototype，这个属性是指向原型对象

②原型对象prototype里面有一个constructor属性，该属性指向原型对象所属的构造函数

③实例对象都有一个_proto_属性，该属性也指向构造函数的原型对象，它是一个非标准属性，不可以用于编程，它是用于浏览器自己使用的

2）prototype与_proto_的关系

①prototype是函数的属性

②_proto_是实例对象的属性
          ——这两者都指向同一个原型对象