JS对象继承使用案例详解

这次给大家带来JS对象继承使用案例详解，JS对象继承使用的注意事项有哪些，下面就是实战案例，一起来看一下。

修改非自己拥有的对象是解决某些问题很好的方案。在一种“无公害”的状态下，它通常不会发生；发生的原因可能是开发者遇到了一个问题，然而又通过修改对象解决了这个问题。尽管如此，解决一个已知问题的方案总是不止一种的。大多是计算机科学知识已经在静态类型语言环境中进化出了解决难题方案，如Java。可能有一些方法，所谓的设计模式，不直接修改这些对象而是扩展这些对象。

在JS之外，最受欢迎的对象扩充的形式是继承。如果一种类型的对象已经做到了你想要的大多数工作，那么继承自它，然后再新增一些功能即可。在JS中有两种基本的形式：基于对象的继承和基于类型的继承。

在JS中，继承仍然有一些很大的限制。首先，不能从DOM或BOM对象继承。其次，由于数组索引和length属性之间错综复杂的关系，继承自Array是不能正常工作的。

基于对象的继承

在基于对象的继承中，也经常叫做原型继承，一个对象继承另外一个对象是不需要调用构造函数的。ES5的Object.create()方法是实现这种继承的最简单的方式。例如：

var person = {  name: 'Nicholas',  sayName: function () {    console.log(this.name);
  }
};var myPerson = Object.create(person);
myPerson.sayName(); // "Nicholas"

这个例子创建了一个新对象myPerson，它继承自person。这种继承方式就如同myPerson的原型设置为person，从此myPerson可以访问person的属性和方法，而不需要同名变量在新的对象上再重新定义一遍。例如，重新定义myPerson.sayName()会自动切断对person.sayName()的访问：

myPerson.sayName = function () {  console.log('Anonymous');
};
myPerson.sayName(); // "Anonymous"person.sayName(); // "Nicholas"

Object.create()方法可以指定第二个参数，该参数对象中的属性和方法将添加到新的对象中。例如：

var myPerson = Object.create(person, {  name: {    value: 'Greg'
  }
});
myPerson.sayName(); // "Greg"person.sayName(); // "Nicholas"

这个例子创建的myPerson对象拥有自己的name属性值，所以调用sayName()显示的是“Greg”而不是“Nicholas”。

一旦以这种方式创建了一个新对象，该新对象完全可以随意修改。毕竟，你是该对象的拥有者，在自己的项目中你可以任意新增方法，覆盖已存在方法，甚至是删除方法（或者阻止它们的访问）。

基于类型的继承

基于类型的继承和基于对象的继承工作方式是差不多的，它从一个已存在的对象继承，这里的继承是依赖于原型的。因此，基于类型的继承是通过构造函数实现的，而非对象。这意味着，需要访问被继承对象的构造函数。比起JS中原生的类型，在开发者定义了构造函数的情况下，基于类型的继承是最合适的。同时，基于类型的继承一般需要两步：首先，原型继承；然后，构造器继承。构造器继承是调用超类的构造函数时传入新建的对象作为其this的值。例如：

function Person (name) {  this.name = name;
}function Author (name) {
  Person.call(this, name); // 继承构造器}
Author.prototype = new Person();

这段代码里，Author类型继承自Person。属性name实际上是由Person类管理的，所以Person.call(this, name)允许Person构造器继续定义该属性。Person构造器是在this上执行的，this指向一个Author对象，所以最终的name定义在这个Author对象上。

对比基于对象的继承，基于类型的继承在创建新对象时更加灵活。定义了一个类型可以让你创建多个实例对象，所有的对象都是继承自一个通用的超类。新的类型应该明确定义需要使用的属性和方法，它们与超类中的应该完全不同。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

web开发中如何避免空比较

为什么web开发中需要避免使用全局变量

Atas ialah kandungan terperinci JS对象继承使用案例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!