ES5 的构造函数原型链继承

2019-10-09

构造函数

构造函数,就是专门用来生成实例对象的函数。一个构造函数,可以生成多个实例对象,这些实例对象都有相同的结构。

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

为了与普通函数区别,构造函数名字的第一个字母通常大写。

构造函数的特点有两个:

  • 函数体内部使用了 this关键字,代表了所要生成的对象实例。
  • 生成对象的时候,必须使用 new命令。

new 命令

基本用法

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

let a = new Person('dora');
a.name      // dora

new命令本身就可以执行构造函数,所以后面的构造函数可以带括号,也可以不带括号,但为了表明是函数调用,推荐使用括号表示更明确的语义。

new 命令的原理

使用 new命令时,它后面的函数依次执行下面的步骤:

  1. 创建一个空对象,作为将要返回的对象实例。let o = new Object();
  2. 将这个空对象的原型,指向构造函数的prototype属性。 Object.setPrototypeOf(o,Foo.prototype);
  3. 将构造函数的 this 绑定到新创建的空对象上。Foo.call(o);
  4. 始执行构造函数内部的代码。

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

function Person(name) {
  this.name = name;
  if (name == undefined) {
    return {};
  }else if(typeof name != 'string'){
    return '姓名有误';
  }
  console.log(111);
}

new Person();        //  {}
new Person(123);     //  {name: 123}

new Person('dora');  
// {name:'dora'}
// 111

new.target

如果当前函数是 new命令调用的,在函数内部的 new.target属性指向当前函数,否则为 undefined

function F() {
  console.log(new.target === F);
}

F()       // false
new F()   // true

使用这个属性,可以判断函数调用时,是否使用了 new命令。

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

F()       // false
new F()   // true

强制使用 new 命令

如果不使用 new命令执行构造函数就会引发一些意想不到的结果,所以为了保证构造函数必须与 new命令一起使用,除了 new.target之外也可以有以下两个解决办法。

1. 构造函数内部使用严格模式

在构造函数内部第一行加上 use strict。这样的话,一旦忘了使用 new命令,直接调用构造函数就会报错。

function Person(name, age){
  'use strict';
  this.name = name;
  this.age = age;
}

Person()
//  TypeError: Cannot set property 'name' of undefined

报错原因是因为不加 new调用构造函数时,this指向全局对象,而严格模式下,this不能指向全局对象,默认等于 undefined,给 undefined添加属性肯定会报错。

2. 在构造函数内部通过 instanceof 判断是否使用 new 命令

function Person(name, age) {
  if (!(this instanceof Person)) {
    return new Person(name, age);
  }

  this.name = name;
  this.age = age;
}

Person('dora', 18).name          // dora
(new Person('dora', 18)).age     // 18

在构造函数内部判断 this是否是构造函数的实例,如果不是,则直接返回一个实例对象。

prototype 原型

任何函数都有一个 prototype属性,这个属性称为函数的“原型”,属性值是一个对象。只有函数有原型属性

function f(){}
typeof f.prototype   // "object"

对于普通函数来说,原型没有什么用。但对于构造函数来说,通过 new生成实例的时候,该属性会自动成为实例对象的原型对象。

prototype 属性的作用

用来定义所有实例对象共用的属性和方法。

如果将对象的方法写入构造函数中,则 new多少个实例,方法将会被复制多少次,虽然复制出来的函数是一样的,但分别指向不同的引用地址,不利于函数的复用。

function Person(){
  this.name = function(){
      console.log('dora');
  }
}
let p1 = new Person();
let p2 = new Person();

p1.name === p2.name     // false

因此,将所有的属性都定义在构造函数里,所有的方法都定义在构造函数的原型中。这样,实例的方法都指向同一个引用地址,内存消耗小很多。

constructor 属性

函数原型 prototype对象的属性,指向这个原型所在的构造函数,可以被所有实例对象继承,指向构造自己的构造函数。

Person.prototype.constructor.name   //  "Person"
p1.constructor.name                 //  "Person"

函数的 name属性返回函数名。

给 prototype 添加属性

1. 点语法追加属性

Person.prototype.sayHi = function(){
    console.log('Hi,I am Dora');
}

2. 覆盖原型对象

Person.prototype = {
  sayHi: function(){
      console.log('Hi,I am Dora');
  }
}

这样用对象字面量直接覆盖,会让 constructor与构造函数失联,可以手动补上这个属性。

Person.prototype = {
  constructor: Person,
  sayHi: function(){
      console.log('Hi,I am Dora');
  }
}

定义构造函数原型中的方法时尽量不要相互嵌套,各方法最好相互独立。

proto原型对象

任何一个对象都有 __proto__属性,这个属性称为对象的“原型对象”,一个对象的原型对象就是它的构造函数的 prototype

function Person(){}
let p1 = new Person();

p1.__proto__ === Person.prototype  // true

Object.getPrototypeOf(obj)

__proto__并不是语言本身的属性,这是各大浏览器厂商添加的私有属性,虽然目前很多浏览器都可以识别这个属性,但依旧不建议在生产环境下使用,避免对环境产生依赖。

生产环境下,我们可以使用 Object.getPrototypeOf(obj)方法来获取参数对象的原型。

Object.getPrototypeOf(p1) === Person.prototype   // true

原型链机制

当访问对象的属性时,如果这个对象没有这个属性,系统就会查找这个对象的 __proto__原型对象,原型对象也是个对象,也有自己的 __proto__原型对象,然后就会按照这个原型链依次往上查找,直到原型链的终点 Object.prototype

Object()是系统内置的构造函数,用来创建对象的, Object.prototype是所有对象的原型链顶端,而Object.prototype的原型对象是 null

Object.getPrototypeOf(Object.prototype) // null

如果对象自身和它的原型都定义了一个同名属性,那么优先读取对象自身的属性。

继承

继承的核心是 子类构造函数的原型是父类构造函数的一个实例对象。

首先继承父类的属性

// 1\. 父类构造函数
function Super(data){
  this.data = data;
};
Super.prototype.funName = function(){};

// 2\. 子类构造函数
function Sub(){
  // 用来继承父类的参数和属性
  Super.apply(this, arguments);
}

其次继承父类的方法

  1. 整体继承

    Sub.prototype = Object.create(Super.prototype);
    
    // or
    
    Sub.prototype = new Super();
  2. 单个方法的继承

    Sub.prototype.funName = function(){
      Super.prototype.funName.call(this);
      // some other code
    }

最后需要改变 constructor 指向

此时子类实例的 constructor指向父类构造函数 Super,需手动改变。

Sub.prototype.constructor = Sub;

多重继承

ES5 没有多重继承功能,即不允许一个对象同时继承多个对象,但可通过变通方法实现这个功能。

function S(){
  M1.call(this);
  M2.call(this);
};
S.prototype = Object.create(M1.prototype); // 继承 M1
Object.assign(S.prototype,M2.prototype);   // 继承链上加入 M2
S.prototype.constructor = S;               // 指定构造函数。

实例验证

instanceof 运算符

instanceof运算符返回一个布尔值,表示对象是否为某个构造函数的实例。继承的子类实例也是父类的实例,因此继承的也为 true

let d = new Date();
d instanceof Date    // true
d instanceof Object  // true

Object.prototype.isPrototypeOf()

实例对象可继承 isProtorypeOf()方法,用来判断该对象是否为参数对象的原型对象。

只要实例对象处在参数对象的原型链上,isPrototypeOf()方法都返回 true

let o1 = {};
let o2 = Object.create(o1);
let o3 = Object.create(o2);

o2.isPrototypeOf(o3)   // true
o1.isPrototypeOf(o3)   // true
o2.isPrototypeOf(o2)   // false
原文链接:segmentfault.com

上一篇:前端Js笔试题面试题
下一篇:Node 使用 Selenium 进行前端自动化操作
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部