目录

• 简介
• 什么是对象
• 构造函数
• 构造函数的特点
• new命令的原理
• prototype对象
• Object的prototype操作
• Object.getPrototypeOf
• Object.setPrototypeOf
• Object.prototype.isPrototypeOf()
• Object.prototype.proto
• 三种获取原型对象的方法
• this对象
• 绑定this的方法
• call
• apply
• bind
• 继承
• 构造函数的继承
• class
• 表达式属性名
• 静态方法
• 静态属性
• class的继承
• 总结

简介

本将会深入讲解面向对象在javascript中的应用，并详细介绍三种对象的生成方式：构造函数，原型链，类。

什么是对象

虽然说程序员不缺对象，随时随地都可以new一个出来，但是在程序的世界中，对象到底是什么呢？

对象是单个实物的抽象。

对象是一个容器，封装了属性（property）和方法（method）。

而面向对象是相对于面向过程来讲的，面向对象方法，把相关的数据和方法组织为一个整体来看待，从更高的层次来进行系统建模，更贴近事物的自然运行模式。

面向对象的好处就是可抽象，封装和可重用性，同时提供了继承和多态等非常有用的特性。

而随着JS的发展，已经超越了最开始的脚本语言，尤其是nodejs的出现之后，更是极大的丰富了js的工作能力。

所以JS也需要进行对象化。

一般来说，在JS中构建对象有三种方式：

• 构造函数（constructor）
• 原型链（prototype）
• 类(class) ---ES6提供

接下来，我们一一来讲解。

构造函数

构造函数是专门用来生成对象的函数。它提供模板，描述对象的基本结构。

一个构造函数，可以生成多个对象，这些对象都有相同的结构。构造函数的写法就是一个普通的函数，但是有自己的特征和用法.

var Book  = function () {
    this.name = 'www.flydean.com';
}

Book就是构造函数，它提供模板，用来生成实例对象。为了与普通函数区别，构造函数名字的第一个字母通常大写。

构造函数的特点

构造函数首先是一个函数，也就是说是function开头的函数。其次函数体内部使用了this关键字，代表了所要生成的对象实例。

在使用构造函数的时候，必需用new命令，调用Book函数。

new命令的作用，就是执行构造函数，返回一个实例对象。

var Book  = function () {
    this.name = 'www.flydean.com';
}
var b1 = new Book();
console.log(b1.name);

上面的例子输出结果：

www.flydean.com

如果我们忘了使用new，会发生什么情况呢？

var Book  = function () {
    this.name = 'www.flydean.com';
}
var b2 = Book();
console.log(name);
console.log(b2.name);

第一个输出会输出www.flydean.com

而第二个则会报一个错误：

TypeError: Cannot read property 'name' of undefined

因为这样调用的this指向的是global,所以this.name变成了全局变量。

为了避免这种忘记写new的问题，可以在第一行加上use strict，在严格模式中，函数内部的this不能指向全局对象，默认等于undefined，导致不加new调用会报错。

如果不想使用use strict,则可以在构造函数内部判断是否使用new命令，如果发现没有使用，则直接返回一个实例对象。

function Person(firstname,lastname){
    if(!(this instanceof Person)){
        return new Person(firstname,lastname);
    }
    this.firstname= firstname;
    this.firstname = lastname;
}
console.log(Person("jack","ma").firstname);
console.log((new Person("jack","ma")).firstname);

new命令的原理

使用new命令时，它后面的函数调用就不是正常的调用，而是依次执行下面的步骤:

1. 创建一个空对象，作为将要返回的对象实例
2. 将这个空对象的原型，指向构造函数的prototype属性
3. 将这个空对象赋值给函数内部的this关键字
4. 开始执行构造函数内部的代码

如果构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象；否则，就会不管return语句，返回this对象。

var Book  = function () {
    this.name = 'www.flydean.com';
    return {author:'flydean'};
}
console.log((new Book()).author);

函数内部可以使用new.target属性。如果当前函数是new命令调用，new.target指向当前函数，否则为undefined。

通过new.target我们也可以用来判断对象是否通过new来创建：

function f(){
    if(! new.target){
        throw new Error('请使用new命令！');
    }
}
f();

构造函数作为模板，可以生成实例对象。但是，有时只能拿到实例对象，而该对象根本就不是由构造函数生成的，这时可以使用Object.create()方法，直接以某个实例对象作为模板，生成一个新的实例对象。

var book2 = {
    name : '三毛流浪记',
    author : '三毛',
    getName : function () {
        console.log('book name is:' + this.name);
    }
}
var book3 = Object.create(book2);
console.log(book3.name);
book3.getName();

prototype对象

构造函数有什么缺点呢？构造函数的缺点就是会将构造函数内部的对象都复制一份：

function Book(){
    this.name ='www.flydean.com';
    this.getName =function (){
        console.log('flydean');
    }
}
var book1 = new Book();
var book2  = new Book();
console.log(book1.getName  === book2.getName);

输出结果是 false。说明每次new一个对象，对象中的方法也被拷贝了一份。而这并不是必须的。

JavaScript 的每个对象都继承另一个对象，后者称为“原型”（prototype）对象。只有null除外，它没有自己的原型对象。

原型对象上的所有属性和方法，都能被派生对象共享。这就是 JavaScript 继承机制的基本设计。

通过构造函数生成实例对象时，会自动为实例对象分配原型对象。每一个构造函数都有一个prototype属性，这个属性就是实例对象的原型对象。

function Book(name){
    this.name = name;
}
Book.prototype.author ='flydean';
var book1 = new Book();
var book2 = new Book();
console.log(book1.author);
console.log(book2.author);

上面例子中的author属性会被Book的所有实例所继承，Book的prototype对象，就是book1和book2的原型对象。

原型对象的属性不是实例对象自身的属性。只要修改原型对象，变动就立刻会体现在所有实例对象上。

由于原型本身也是对象，又有自己的原型，所以形成了一条原型链（prototype chain）。

如果一层层地上溯，所有对象的原型最终都可以上溯到Object.prototype，即Object构造函数的prototype属性指向的那个对象。

Object.prototype对象有没有它的原型呢？回答可以是有的，就是没有任何属性和方法的null对象，而null对象没有自己的原型。

console.log(Object.getPrototypeOf(Object.prototype));
//null

prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数.

function Book(name){
    this.name = name;
}
var book3 =new Book();
console.log(book3.constructor);
console.log(book3.constructor === Book.prototype.constructor);
console.log(book3.hasOwnProperty(constructor));

还是刚刚的book，book3.constructor就是function Book本身。它也等于Book.prototype.constructor。

constructor属性的作用，是分辨原型对象到底属于哪个构造函数。

因为prototype是一个对象，所以对象可以被赋值，也就是说prototype可以被改变：

function A(){}
var a = new A();
console.log(a instanceof A);
function B(){}
A.prototype = B.prototype;
console.log(a instanceof A);

上面的例子中，我们修改了A.prototype,最后a instanceof A值是false。

为了保证不会出现这样错误匹配的问题，我们再构建prototype的时候，一定不要直接重写整个的prototype，只需要修改其中的某个属性就好：

//不要这样写
A.prototype  ={
    method1:function (){}
}
//比较好的写法
A.prototype  ={
    constructor:A,
    method1:function (){}
}
//更好的写法
A.prototype.method1 = function (){}

Object的prototype操作

Object.getPrototypeOf

Object.getPrototypeOf方法返回一个对象的原型。这是获取原型对象的标准方法.

//空对象的prototype是Object.prototype
console.log(Object.getPrototypeOf({}) === Object.prototype);
//function的prototype是Function.prototype
function f(){}
console.log(Object.getPrototypeOf(f)  === Function.prototype);
function F(){this.name ='flydean'}
var f1 =new F();
console.log(Object.getPrototypeOf(f1) === F.prototype);
var f2 = new f();
console.log(Object.getPrototypeOf(f2) === f.prototype);

上面4个的输出结果都是true。

Object.setPrototypeOf

Object.setPrototypeOf方法可以为现有对象设置原型，返回一个新对象。

Object.setPrototypeOf方法接受两个参数，第一个是现有对象，第二个是原型对象。

var a = {name: 'flydean'};
var b = Object.setPrototypeOf({},a);
console.log(b.name);

Object.prototype.isPrototypeOf()

对象实例的isPrototypeOf方法，用来判断一个对象是否是另一个对象的原型.

var a = {name: 'flydean'};
var b = Object.setPrototypeOf({},a);
console.log(a.isPrototypeOf(b));

Object.prototype.proto

__proto__属性（前后各两个下划线）可以改写某个对象的原型对象。

还是刚才的例子，这次我们使用__proto__来改写对象的原型。

var a = {name: 'flydean'};
var c ={};
c.__proto__ = a;
console.log(Object.getPrototypeOf(c));

__proto__属性只有浏览器才需要部署，其他环境可以没有这个属性，而且前后的两根下划线，表示它本质是一个内部属性，不应该对使用者暴露。

因此，应该尽量少用这个属性，而是用Object.getPrototypeof()（读取）和Object.setPrototypeOf()（设置），进行原型对象的读写操作。

三种获取原型对象的方法

综上，我们有三种获取原型对象的方法：

• obj.proto
• obj.constructor.prototype
• Object.getPrototypeOf(obj)