细说JS中的原型与原型链

Posted 2020-10-10

我们都知道，在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