JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，Object ，Function 是JS自带的函数对象。

怎么区分？其实很简单，凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象。Function Object 也都是通过 New Function()创建的。

构造函数

构造函数可用来创建特定类型的对象。像Object和Array这样的原生构造函数，在运行时会自动出现在执行环境中。

1
2
3
4
5
6
function Person() {

}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin

按照国际惯例，构造函数始终都应该以一个大写字母开头，而非构造函数则应该以一个小写字母开头。

要创建Person的新实例，必须使用new操作符。一般是经历以下四个步骤：

  • 1、创建一个新对象；
  • 2、将构造函数的作用域赋给新对象（此this的指向了这个新对象）
  • 3、为这新对象添加构造函数的属性
  • 4、返回新对象

上面例子中，person 就用有一个constructor （构造函数）属性，该属性是指向Person。

原型对象

无论什么时候，只要创建一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。普通对象没有 prototype，但有 __proto__ 属性。

如上面例子，Person.prototype 指向了原型象，而 Person.prototype.constructor 又指回了Person。

而 person 只是一个对象实例。

而person可以访问保存在原型中的值，但却不能重写原型中的值。如果我们在 person 中添加一个属性，而该属性与实例原型中的一个属性同名，那个person中的属性会暂时屏蔽原型中的属性，删除后，还是读回原型中的属性

1
2
3
4
5
6
7
8
9
function Person() {

}
Person.prototype.name = 'Perty';
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin
delete person.name
console.log(person.name) // Perty

解析器的操作是：

  • “实例person有name属性吗？”
  • “有” —— 于是就读取实例中的name属性，输出 Kevin

删除后，再运行时：

  • “实例person有name属性吗？”
  • “没有”
  • “person的原型有name属性吗？”
  • “有” —— 于是就讯取原型中的name的属性，输出 Perty

原型链

在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做 __proto__ 的内置属性，用于指向创建它的函数对象的原型对象 prototype。以上面的例子为例：

1
console.log(person.__proto__ === Person.prototype)  // true

同样的，Person.prototype 也同样有 proto 属性，它指向创建它的函数对象（Object）的prototype

1
console.log(Person.prototype === Object.prototype) // true

继续，Object.prototype对象也有proto属性，但它比较特殊，为null

1
console.log(Object.prototype.__proto__) // null

我们把这个有 __proto__ 串起来的直到 Object.prototype.__proto__ 为null的链叫做原型链。

person.__proto__ ==> Person.prototype.__proto__ ==> Object.prototype.__proto__ ==> null