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

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

对象是单个实物的抽象。

对象是一个容器,封装了属性(property)和方法(method)。

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

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

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

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

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

构造函数(constructor)

原型链(prototype)

类(class) —ES6提供

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

构造函数

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

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

var Book  = function () {
    this.name = '123456';
}

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

1.1 构造函数的特点

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

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

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

var Book  = function () {
    this.name = '123456';
}

var b1 = new Book();
console.log(b1.name);

上面的例子输出结果:

123456

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

var Book  = function () {
    this.name = '123456';
}

var b2 = Book();
console.log(name);
console.log(b2.name);

第一个输出会输出 123456

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

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);

1.2 new命令的原理

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

创建一个空对象,作为将要返回的对象实例

将这个空对象的原型,指向构造函数的prototype属性

将这个空对象赋值给函数内部的this关键字

开始执行构造函数内部的代码

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

var Book  = function () {
    this.name = '123456';
    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 ='123456';
    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)

this 对象

this 总是返回一个对象,简单说,就是返回属性或方法“当前”所在的对象。

var book = {
    name :'flydean',
    getName : function (){
        return '书名:'+ this.name;
    }
}

console.log(book.getName());
//书名:flydean

这里 this 的指向是可变的,我们看一个例子 :

var book = {
    name :'flydean',
    getName : function (){
        return '书名:'+ this.name;
    }
}

var car ={
    name :'car'
}

car.getName = book.getName;
console.log(car.getName());
//书名:car

当 A 对象的方法被赋予 B 对象,该方法中的 this 就从指向 A 对象变成了指向 B 对象

上面的例子中,我们把 book 中的 getName 方法赋值给了 car 对象,this 对象现在就指向了 car。

如果某个方法位于多层对象的内部,这时 this 只是指向当前一层的对象,而不会继承更上面的层。

var book1 = {
    name :'flydean',
    book2: {
        getName : function (){
            return '书名:'+ this.name;
        }
    }
}
console.log(book1.book2.getName());
//书名:undefined

上面的例子中,this 是定义在对象中的函数中,如果是在函数中的函数中定义的 this,代表什么呢?

var book3 = {
    name :'flydean',
    book4: function(){
        console.log('book4');
        var getName = function (){
            console.log(this); //Window
        }();
    }
}
book3.book4();

如果在函数中的函数中使用了 this,那么内层的 this 指向的是全局的 window对象。

所以我们在使用的过程中要避免多层 this。由于 this 的指向是不确定的,所以切勿在函数中包含多层的 this。

如果在全局环境使用 this,它指的就是顶层对象 window。

数组的 map 和 foreach 方法,允许提供一个函数作为参数。这个函数内部不应该使用 this。

var book5 ={
    name : 'flydean',
    author : ['max','jacken'],
    f: function (){
        this.author.forEach(function (item) {
            console.log(this.name+' '+item);
        })
    }
}
book5.f();
//undefined max
//undefined jacken

foreach 方法的回调函数中的 this,其实是指向 window 对象,因此取不到o.v 的值。原因跟上一段的多层 this 是一样的,就是内层的 this 不指向外部,而指向顶层对象。

怎么解决呢?我们使用一个中间变量:

var book6 ={
    name : 'flydean',
    author : ['max','jacken'],
    f: function (){
        var that = this;
        this.author.forEach(function (item) {
            console.log(that.name+' '+item);
        })
    }
}
book6.f();
//flydean max
//flydean jacken

或者将 this 当作 foreach 方法的第二个参数,固定它的运行环境:

var book7 ={
    name : 'flydean',
    author : ['max','jacken'],
    f: function (){
        this.author.forEach(function (item) {
            console.log(this.name+' '+item);
        },this)
    }
}
book7.f();
//flydean max
//flydean jacken

绑定 this 的方法

JavaScript 提供了 call、apply、bind 这三个方法,来切换/固定 this 的指向.

call

函数实例的 call 方法,可以指定函数内部 this 的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数.

var book = {};

var f = function () {
    return this;
}
f()  === this ; //true
f.call(book) === book; //true

上面例子中,如果直接调用 f(),那么返回的就是全局的 window 对象。如果传入 book 对象,那么返回的就是 book 对象。

call 方法的参数,应该是一个对象。如果参数为空、null 和 undefined,则默认传入全局对象。

如果 call 方法的参数是一个原始值,那么这个原始值会自动转成对应的包装对象,然后传入 call 方法。

var f = function () {
    return this;
}

console.log(f.call(100));
//[Number: 100]

call 方法还可以接受多个参数。

func.call(thisValue,arg1,arg2, ...);

call 的第一个参数就是 this 所要指向的那个对象,后面的参数则是函数调用时所需的参数。

call 一般用在调用对象的原始方法:

var person =  {};

person.hasOwnProperty('getName');//false

//覆盖person的getName方法
person.getName  = function(){
    return true;
}

person.hasOwnProperty('getName');//true
Object.prototype.hasOwnProperty.call(person,'getName');//false

apply

apply 方法的作用与 call 方法类似,也是改变 this 指向,然后再调用该函数。唯一的区别就是,它接收一个数组作为函数执行时的参数.

func.apply(thisValue,[arg1,arg2,...])

bind

call 和 apply 是改变 this 的指向,然后调用该函数,而 bind 方法用于将函数体内的 this 绑定到某个对象,然后返回一个新函数.

var d = new Date();

console.log(d.getTime()); //1600755862787

var getTime= d.getTime;
console.log(getTime());//TypeError: this is not a Date object.

上面的例子中,getTime 方法里面调用了 this,如果直接把 d.getTime 赋值给 getTime 变量,那么 this 将会指向全局的 window 对象,导致运行错误。

我们可以这样修改:

var d = new Date();

console.log(d.getTime()); //1600755862787

var getTime2= d.getTime.bind(d);
console.log(getTime2());

bind 比 call 方法和 apply 方法更进一步的是,除了绑定 this 以外,还可以绑定原函数的参数。

var add = function(x,y){
    return x +this.m +  y + this.n;
}
var addObj ={
    m: 10,
    n: 10
}

var newAdd = add.bind(addObj,2);
console.log(newAdd(3));//25

上面的例子中,bind 将两个参数的 add 方法,替换成了 1 个参数的 add 方法。

注意:bind每次调用都会返回一个新的函数,从而导致无法取消之前的绑定。

继承

构造函数的继承。

构造函数的继承第一步是在子类的构造函数中,调用父类的构造函数,让子类实例具有父类实例的属性。

然后让子类的原型指向父类的原型,这样子类就可以继承父类原型。

function Person (){
    this.name = 'person';
}

function Boy(){
    Person.call(this);
    this.title = 'boy';
}

Boy.prototype= Object.create(Person.prototype);
Boy.prototype.constructor=Boy;
Boy.prototype.getTitle=function (){console.log(this.title)};

var b =new Boy();
b.getTitle();
console.log(b);
~~

调用父类的构造函数是初始化实例对象的属性。子类的原型指向父类的原型是为了基础父类的原型对象的属性。

另外一种写法是 Boy.prototype 等于一个父类实例:

Boy.prototype = new Person();


上面这种写法也有继承的效果,但是子类会具有父类实例的方法。有时,这可能不是我们需要的,所以不推荐使用这种写法.

JavaScript 不提供多重继承功能,即不允许一个对象同时继承多个对象。但是,可以通过变通方法,实现这个功能:

function Person1 (){

this.name = 'person';

}
function Person2 (){

this.sex = '男';

}

function Boy(){

Person1.call(this);
Person2.call(this);
this.title = 'boy';

}

//继承Person1
Boy.prototype= Object.create(Person1.prototype);
//继承链加上Person2
Object.assign(Boy.prototype,Person2.prototype);

Boy.prototype.constructor=Boy;
Boy.prototype.getTitle=function (){console.log(this.title)};

var b =new Boy();
b.getTitle();
console.log(b);
//Boy { name: 'person', sex: '男', title: 'boy' }


class
-----

ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

class Person {

constructor(name,sex) {
    this.name=name;
    this.sex =sex;
}

toString(){
    return this.name + ' '+ this.sex;
}

}


构造函数的 prototype 属性,在 ES6 的“类”上面继续存在。事实上,类的所有方法都定义在类的 prototype 属性上面。

上面的类等同于:

Person.prototype = {

   constructor(name,sex) {
    this.name=name;
    this.sex =sex;
}

toString(){
    return this.name + ' '+ this.sex;
} 

}


**表达式属性名**

class 还支持动态的表达式属性名:

let methodName = 'getName';

class Person {

constructor(name,sex) {
    this.name=name;
    this.sex =sex;
}

toString(){
    return this.name + ' '+ this.sex;
}

[methodName](){
    return this.name;
}

}


**静态方法**

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上 static 关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

class Person {

constructor(name,sex) {
    this.name=name;
    this.sex =sex;
}

static getSex(){
    return '男';
}

}

console.log(Person.getSex()); //男

let p = new Person();
console.log(p.getSex());//TypeError: p.getSex is not a function


**静态属性**

静态属性指的是 Class 本身的属性,即 Class.propName,而不是定义在实例对象(this)上的属性.

class Person {

constructor(name,sex) {
    this.name=name;
    this.sex =sex;
}

}
Person.address ='address';
console.log(Person.address);


目前,只有这种写法可行,因为 ES6 明确规定,Class 内部只有静态方法,没有静态属性。

**class的继承**

class 的继承一般使用 extends 关键字:

class Boy extends Person{

constructor(name,sex,address) {
    super(name,sex); //调用父类的构造函数
    this.address =address;
}

toString() {
    return super.toString();//调用父类的方法
}

}


在子类的构造函数中,只有调用 super 之后,才可以使用 this 关键字,否则会报错。这是因为子类实例的构建,是基于对父类实例加工,只有 super 方法才能返回父类实例。

super 作为函数调用时,代表父类的构造函数。ES6 要求,子类的构造函数必须执行一次 super 函数。

super 作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。

上面的例子,我们在子类 Boy 中的 toString 普通方法中,调用了super.toString(),之前我们也讲了,类的所有方法都定义在类的 prototype属性上面。所以 super.toString 就是 Person 中定义的 toString 方法。

由于 super 指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过 super 调用的。

定义在父类实例上的方法或属性就是指在 constructor 中定义的方法或者属性。

Person 类,在 constructor 中定义了 name 属性。我们看一下在 Boy 中的普通方法中访问会有什么问题:

class Boy extends Person{

constructor(name,sex,address) {
    super(name,sex); //调用父类的构造函数
    console.log(super.name);  //undefined
    console.log(this.name);  //hanmeimei
    this.address =address;
}

toString() {
    return super.toString();//调用父类的方法
}

getName(){
    console.log(super.name);  //undefined
    console.log(this.name);    //hanmeimei
}

}

var b =new Boy('hanmeimei','女','北京');
b.getName();


技术全能渣男
40 声望1 粉丝