细说JS中的原型与原型链

我们都知道，在javascript中，万物皆对象。但是，对象也是有区别的，分为普通对象和函数对象，说明走一波！

var o1 = {}; 
var o2 =new Object();
var o3 = new f1();

function f1(){}; 
var f2 = function(){};
var f3 = new Function('str','console.log(str)');

　　如果我们对上面的变量进行console.log(typeof)的话，我们可以看到，o开头的结果都为object,f开头的结果为function!

一定要区分出函数对象和普通对象，下面会用到这个概念。

构造函数

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function() { alert(this.name) } 
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');

　重点来了，person1和person2都是Person的实例，这两个实例都有一个constructor(构造函数)属性，该属性是一个指针，指向Person！

    console.log(person1.constructor);
    console.log(person2.constructor)；
　　//打印结果都为

 //    function Person(name, age, job) {
 //    this.name = name;
 //    this.age = age;
 //    this.job = job;
 //    this.sayName = function() { alert(this.name) } 
}

所以可以得出第一个结论

　　person1.constructor === Person;

　　person2.constructor === Person;

Person是构造函数，person1和person2都是Person的实例

实例的构造函数属性(constructor)指向构造函数

 

原型对象

在javascript中，每当定义一个对象（函数也是对象），对象都会包含一些预定义的属性，其中每个函数对象都有一个prototype属性，这个属性指向函数的原型对象，所以反过来粗暴一点说，原型对象就是函数的prototype这个属性所指的对象，函数的对象的prototype的属性就是这个函数的原型对象。

不要慌，走个例子来个再来个总结就明白了

 

Person.prototype = {
   name:  'Zaxlct',
   age: 28,
   job: 'Software Engineer',
   sayName: function() {
     alert(this.name);
   }
}

　　这就是原型对象，明白吗，然后我们给这个原型对象添加很多很多的属性和sayName这个方法，当然，他还有一个对象constructor

 默认情况下，所有的原型对象，都会自动获得一个constructor(构造函数)这个属性，这个属性是一个指针，指向prototype属性所在的函数Person!

Person.prototype.constructor === Person

.和上面有点相似，千万不要混！

下面有个更混的，我们可以根据公式

person1.constructor == Person
Person.prototype.constructor == Person

提出一个问题，person1为什么会有constructor属性呢，那是因为person1是Person的实例。那Person.prototype为什么也有constructor属性呢？

a:因为Person.prototype也是Person的实例，也就是说：

在Person创建的时候，创建了一个他的实例对象并赋值给了他的prototype，基本过程可以理解成

var a = New Person();

Person.prototype = a

所以不难看出，原型对象（Person.prototype）是构造函数(Person)的一个实例

讲道理，说了那么久，又是对象又是原型的，好像很厉害的样子，这玩意有什么用呢？

好吧，他的用处主要是用来继承！继承！继承！举个例子

　

var Person = function(name){
    this.name = name; 
  };
  Person.prototype.getName = function(){
    return this.name; 
  }
  var person1 = new person('Mick');
  person1.getName();

　　这个例子可以看出，通过给Person.prototype设置了一个函数对象的属性，那有Person的实例（person1）出来的普通对象就继承了这个属性，具体是怎么继承的呢，就要扯到原型链了！！！

原型链先不说，先说说__proto__

js在创建对象的时候，无论是普通对象还是函数对象，都有一个叫__proto__的内置属性，用于指向创建他的构造函数的原型对象。

对象person1有一个__proto__属性，创建它的构造函数是Person,构造函数的原型对象是Person.prototype,所以:

person1.__proto__ === Person.prototype

但是要明确一点，这个链接是存在于实例(person1)于构造函数（Person）的原型对象之间，而不是存在于实例（person1）与构造函数（Person）之间

注意：因为绝大部分浏览器支持这个属性，所以他才被加入ES6里（es5）部分浏览器也支持，但是不是标准

 

构造器

关于创建对象，我们可以这样创建

var obj = {};

它等同于这个样子

var obj = new Object()

根据上面的内容，我们可以看出，obj是构造函数（Object）的一个实例，所以：

obj.constructor === Object

obj.__proto__ === Object.prototype

新对象obj是使用new操作符后跟着一个构造函数来创建的。构造函数（Object）本身就是一个函数（就是上面说的函数对象），他和上面的构造函数Person其实差不多，只不过该函数是出于创建新对象的的目的而定义的，所以不能被Object吓到！！！

同理，可以创建对象的构造器不仅仅有Object,也可以是Array,Date,Function等

 

    var b = new Array();
        console.log(b.constructor === Array);                  //true
        console.log(b.__proto__  === Array.prototype);   //true

        var c = new Date();
        console.log(c.constructor === Date);                     //true
        console.log(c.__proto__ ===Date.prototype);       //true

        var d = new Function
        console.log(d.constructor === Function);               //true
        console.log(d.__proto__ ===Function.prototype)  //true    

 

 

 

这些构造器都是函数对象

	console.log(typeof Object);　　　　//function
	console.log(typeof Function);　　　//function
	console.log(typeof Array);　　　　 //function
	console.log(typeof Date);　　　　  //function
	console.log(typeof Number);　　　//function　
	console.log(typeof String);   　　    //function
	console.log(typeof Boolean);          //function

　　

 

转载于:https://www.cnblogs.com/zhengsongjun/p/7657608.html