JS对象创建模式与继承方式完整解析

对象构建策略

Object 构造函数法：首先实例化一个空白对象，随后动态注入属性与方法。

适用场景：初始阶段对象内部数据状态不明确。

存在问题：代码冗余度高（该问题可通过对象字面量法优化）。

var person = new Object()
person.name = 'Tom' 
person.setName = function(name){
      this.name = name
}

采用对象字面量法：利用 {} 构建对象，并同步定义属性与方法。

适用场景：初始阶段对象内部数据状态已明确。

存在问题：若需构建多个对象，会导致大量代码重复（该问题可通过工厂模式优化）。

var person={
    name:'Tom', 
    setName: function (name){
          this.name = name
    }
}

工厂模式：借助工厂函数动态生成对象并返回结果。

适用场景：需批量构建多个对象。

存在问题：对象缺乏具体类型标识（该问题可通过自定义构造函数法优化）。

function createPerson(name) {
	var obj = {
		name: name,
		setName: function (name) {
			this.name = name
		}
	}
	return obj 
}
var p1 = createPerson('Tom') 
var p2 = createPerson('Mary')

自定义构造函数法：定义专属构造函数，借助 new 关键字构建对象。

适用场景：需批量构建类型明确的多个对象。

存在问题：每个对象实例均持有相同数据（方法），造成内存浪费（该问题可通过构造函数结合原型模式优化）。

function Person(name) {
	this.name = name
	this.setName = function(name) {
		this.name = name
	}
}
var p1 = new Person('Tom')
var p2 = new Person('Mary')

构造函数结合原型模式：定义专属构造函数，属性在函数体内初始化，方法挂载至原型上。

适用场景：需批量构建类型明确的多个对象。

function Person(name) {
	this.name = name
}
Person.prototype.setName = function(name) {
	this.name = name
}
var p1 = new Person('Tom')
var p2 = new Person('Mary')

对象继承策略

原型链继承：

变量查找遵循作用域链；对象属性与方法查找遵循原型链。

child.toString()

child.__proto__ = Child.prototype ----> Child.prototype = new Object() ----> {}.__proto__ = Object.prptotype child 可访问 toString 方法：源于 child 实例可访问其原型对象上的方法；Child 构造函数的原型对象指向 Object 构造函数的实例；{} 实例可访问其原型对象上的方法，因此沿原型链 child 可访问 Object 构造函数原型对象上的方法。

// 父类型
function Parent() {
	this.parentProp = 'parent prop'
}
Parent.prototype.showParent = function() {
	console.log(this.parentProp)
}
// 子类型
function Child() {
	this.childProp = 'child prop'
}
// 让子类构造函数的 prototype 指向父类的实例对象，就可以形成子类 --- 父类的一条原型链，子类就可以访问到父类原型上的属性和方法。
Child.prototype = new Parent()
// 如果此时 console.log(child.constructor) 会打印输出 Parent。
// 默认情况下，所有的原型对象都会自动获得一个 constructor 属性，指向原型对象所在的函数。因此 child 本身是没有 constructor 属性的，而是在它的原型对象身上；又因为它的原型对象指向了 Parent 的实例对象；Parent 实例对象的原型对象的 constructor 是 Parent，因此 child.constructor = Parent。这样是错误的。
Child.prototype.constructor = Child
Child.prototype.showChild = function() {
	console.log(this.childProp)
}
var child = new Child()
child.showParent()

借用构造函数继承：实质上并未实现继承，而是在子类构造函数内部通过 call() 调用父类构造函数。

function Parent(name, age) {
	this.name = name
	this.age = age
}
function Child(name, age, price) {
	Parent.call(this, name, age) // 相当于执行 this.Person(name, age)，也就是相当于 this.name = name; this.age = age
	this.price = price
}
const child = new Child('Tom', 20, 500)
console.log(child.name, child.age, child.price)

组合继承：利用原型链继承实现父类型方法的继承；借用构造函数继承初始化相同属性（实际生效的是此方法）。

call() 用于继承属性，重写原型用于继承方法。

function Parent(name, age) {
	this.name = name
	this.age = age
}
Parent.prototype.setName = function(name) {
	this.name = name
}
function Child(name, age, price) {
    // 初始化相同的属性
	Parent.call(this, name, age) 		
	this.price = price
}
// 继承父类的原型对象上的方法
Child.prototype = new Parent()
// 修正 constructor 属性
Child.prototype.constructor = Child
Parent.prototype.setPrice = function(price) {
	this.price = price
}
const child = new Child('Tom', 20, 500)
console.log(child.name, child.age, child.price)

至此，关于JavaScript对象构建策略与继承策略示例讲解的文章介绍完毕，更多相关JS对象构建策略与继承策略内容请搜索本站往期文章或继续浏览下方相关文章，希望大家日后多多支持本站！

JavaScript对象创建与继承模式详解

对象构建策略

对象继承策略

实用工具推荐