ES6——面向对象

爱敲代码的小生

于 2025-03-30 19:44:29 发布

阅读量734

点赞数 18

文章标签： es6 原型模式 javascript

本文链接：https://blog.youkuaiyun.com/m0_71678977/article/details/146772587

版权

一、原型

1、概念

在JavaScript中，函数是一个特殊的数据。同时，也是一个包含方法和属性的对象。因此，它包含一些相关的属性和方法。如属性length、constructor和方法apply()、call() 等。

同样的，每个函数中都有一个属性——prototype（原型属性），它所存储的就是原型对象。

函数只要一定义，prototype属性就会被创建。它的初始值是一个空对象。

// 定义函数
function foo(a,b) {
  return a * b ;
}

// 函数就是对象。因此，它包含相关的方法和属性，如：
console.info(foo.length) ;
console.info(foo.constructor) ;

// 函数对象包含一个很特殊的属性——prototype
// 函数只要一定义，prototype属性就会被创建。它的初始值是一个空对象。
console.info(typeof foo.prototype) ;

2、构造方法

使用构造方法创建对象时，有一个缺点，它无法共享属性和方法；
同时，每一个实例对象都有自己的属性和方法的副本，会存在浪费内存的问题。

如下图所示：

那么，我们可以在构造函数中，我们通过prototype属性，实现对象的属性和方法的共享。

在实际开发中，我们可以把需要共享的属性和方法定义构造方法的prototype属性中，那么，所有对象的实例就可以共享这些属性和方法了；而把不需要共享的属性和方法，就定义在构造方法即可。

JavaScript规定，每一个构造函数都有一个prototype属性，指向另一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。

// 定义构造函数
function Dog(name,age) {
  // 属性
  this.name = name ;
  this.age = age ;

}

// 通过原型，扩展方法
Dog.prototype.eat = function(sth) {
    return this.name + '喜欢吃' + sth ;
}

// 实例化对象
var xb = new Dog('小白',3) ;
var xh = new Dog('小红',4) ;

console.log(xb.eat("骨头")) ;
console.log(xh.eat("鱼头")) ;

3、扩展属性和方法

1）逐个扩展

// 定义构造函数
function Dog(name,age) {
  //属性
  this.name = name ;
  this.age = age ;

  //方法
  this.sayHello = function() {
    return '你好，我叫' + this.name + ',今年' + this.age + "岁了" ;
  }
}

// 在扩展属性和方法之前创建对象
var xb = new Dog('小白',6) ;

// 在扩展属性和方法之前，访问扩展的属性,输出undefined
console.info(xb.color) ;  

// 逐个扩展属性
Dog.prototype.color = '白色' ;
Dog.prototype.weight = 30 ;

// 逐个扩展行为
Dog.prototype.getInfo = function() {
  return '颜色:' + this.color + ',体重:' + this.weight ;
}

// 在扩展属性和方法之后，访问扩展的属性,正常输出扩展的属性值为白色
console.info(xb.color) ;

注意：

当我们修改对象的原型时，也会作用于之前创建对象。如上例的xb对象是在修改原型之前创建的。如果是完全重写原型的话，则必须重新输出对象，才拥有新扩展的属性和方法；

在以上案例中，name、age、sayHello()我们称之为对象自身的属性和方法；而color、weight、getInfo()称之为原型属性和方法。

2）完全重写原型

注意：完全重写原型后，需要重新创建对象，才拥有新扩展的属性和方法

// 定义构造函数
function Dog(name,age) {
  //属性
  this.name = name ;
  this.age = age ;

  //方法
  this.sayHello = function() {
    return '你好，我叫' + this.name + ',今年' + this.age + "岁了" ;
  }
}

// 在扩展属性和方法之前创建对象
var xb = new Dog('小白',6) ;

// 在扩展属性和方法之前，访问扩展的属性,输出 undefined
console.info(xb.color) ;  

// 完全重写原型(同时指定属性与方法)
Dog.prototype = {
  color:'白色',
  weight:30,
  getInfo:function() {
    return '颜色:' + this.color + ',体重:' + this.weight ;
  }
}

// 注意：完全重写原型后,这里输出的是仍然是 undefined
console.info(xb.color) ;  

// 完全重写原型后，需要重新创建对象，才拥有新扩展的属性和方法
var w = new Dog('小小',4) ;


console.info(w.name) ;                  // 小小
console.info(w.age) ;                 	// 4
console.info(w.sayHello()) ;          	// 你好，我叫小小，今年4岁了

// 使用原型的属性和方法
console.info(w.color) ;                 // 白色
console.info(w.weight) ;                // 30
console.info(w.getInfo()) ;             // 颜色:白色,体重:30

二、原型链

1、概念

任何对象都有原型对象，也就是prototype属性，任何原型对象也是一个对象，该对象就有__proto__属性，这样一层一层往上找，就形成了一条链，我们称此为原型链。

2、查找

每一个实例对象又有一个__proto__属性，指向的构造函数的原型对象，构造函数的原型对象也是一个对象，也有__proto__属性，这样一层一层往上找就形成了原型链。当我们要访问的属性或方法不在自身对象中，那么它是如何查找呢？

当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。
如果还没有就查找原型对象的原型（Object的原型对象）。
依此类推一直找到 Object 为止（null）。
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

// 定义构造函数
function Dog(name,age) {
  // 属性
  this.name = name ;
  this.age = age ;

  // 方法
  this.sayHello = function() {
    return '你好，我叫' + this.name + ',今年' + this.age + "岁了" ;
  }
}

// 完全重写原型(同时指定属性与方法)
Dog.prototype = {
  color:'白色',
  weight:30,
  getInfo:function() {
    return '颜色:' + this.color + ',体重:' + this.weight ;
  }
}

var w = new Dog('小小',4) ;
console.log(w.getInfo());


// 输出对象w时，发现w对象并不存在color和weight属性，那为什么在调用getInfo()方法时，能正常输出呢？
console.log(w);

原因：如果对象本身不存在某个属性，则它从当前对象开始到Object结束，在原型链上查询是否存在此属性，如果有则正常显示，没有则报错。

3、自身属性与原型属性重名

注意：如果自身属性与原型属性重名了，那么对象自身的属性优先级高于原型属性。

// 定义构造函数
function Dog(name) {
  //属性
  this.name = name ;
}

// 在原型中，添加相同的属性name
Dog.prototype.name = '小小' ;

// 创建对象，则返回当前对象的name属性
var w = new Dog('小白') ;

// 输出当前对象的name属性
console.info(w.name) ;
console.info(w) ;

// 删除对象的name属性，则返回原型链上的name属性
delete w.name ;

// 输出原型链上的name属性
console.info(w.name) ;
console.info(w) ;

// 当然，可以给对象w重新创建name属性，则重新覆盖原型链上同名的属性
w.name = 'petter' ;
console.log(w.name) ;
console.log(w) ;

4、isPrototypeOf()方法

判断当前对象是否为另一个对象的原型。

var animal = {
  sex : '男',
  age : 3
}

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

Dog.prototype = animal ;

var xb = new Dog('小白') ;

console.log(animal.isPrototypeOf(xb));

5、神秘的proto属性

对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 __proto__ 原型的存在。
__proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype

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

// 创建对象
var h1 = new Hero('zs');
var h2 = new Hero('ls');

console.log(h1.__proto__);
console.log(Hero.prototype);

// 对象h1的__proto__属性 指向的就是 构造函数Hero的原型对象，因此返回true
console.log(h1.__proto__ == Hero.prototype);

另外，对象原型（ __proto__）和构造函数（prototype）原型对象里面都有一个属性constructor属性，constructor 我们称为构造函数，因为它指回构造函数本身。

constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。
一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了。此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。

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

Hero.prototype = {
  // 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
  constructor:Hero,	// 手动设置指回原来的构造函数
  help:function() {
    console.log('救人');
  },
  fly:function() {
    console.log('飞起来');
  }
}

var h1 = new Hero('super man') ;
console.log(h1);

设置了constructor属性，结果如下所示：

没有设置constructor属性，结果如下所示：

6、扩展内建对象

我们可以通过原型，可以扩展内建对象。但在使用之前，必须慎重考虑。如果我们需要通过原型扩展某个对象时，务必先检查扩展的属性或方法是否已经存在。如：

// 判断String对象是否reverse
if(!String.prototype.reverse) {
  // 扩展reverse方法
  String.prototype.reverse = function() {
    // 实现字符串反转
    return Array.prototype.reverse.apply(this.split('')).join('') ;
  }
}

// 定义字符串
var str = "abc" ;

// 反转输出
console.log(str.reverse());