JavaScript对象的创建模式与继承模式示例讲解

 更新时间:2022年12月01日 08:51:42   作者:花铛  
继承机制是面向对象程序设计使代码可以复用的最重要的手段,它允许程序员在保持原有的特性基础上进行扩展,增加功能,这样产生新的类,称作是派生类。继承呈现了面向对象程序设计的层析结构,体现了由简单到复杂的认知过程。继承是类设计层次的复用

对象的创建模式

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对象创建模式与继承模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • electron-builder书写nsis脚本在安装electron程序时安装其他应用程序(完美解决方案)

    electron-builder书写nsis脚本在安装electron程序时安装其他应用程序(完美解决方案)

    这篇文章主要介绍了electron-builder书写nsis脚本在安装electron程序时安装其他应用程序的解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • JS实现网络请求的三种方式梳理

    JS实现网络请求的三种方式梳理

    本文主要为大家介绍了基于 XMLHttpRequest、Promise、async/await 等三种异步网络请求的写法,文中的示例代码讲解详细,感兴趣的可以学习一下
    2022-03-03
  • JavaScript最全公共方法汇总并解析(前端开发收藏必备)

    JavaScript最全公共方法汇总并解析(前端开发收藏必备)

    JavaScript掌握各种常用的公共方法更是提升开发效率和代码质量的关键,无论你是初学者还是资深开发者,了解并熟练运用这些方法都能让你的代码更加简洁、高效,本篇博客将为你详细汇总并解析最全的JavaScript公共方法,涵盖数组、对象、字符串、日期等各个方面的常用技巧
    2024-06-06
  • 使用微信小程序API,调用微信的各种内置能力。

    使用微信小程序API,调用微信的各种内置能力。

    微信小程序如何使用小程序API,去调用微信提供的各种内置能力(即微信API)。小程序开发框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
    2022-12-12
  • weui中的picker使用js进行动态绑定数据问题

    weui中的picker使用js进行动态绑定数据问题

    这篇文章主要介绍了weui中的picker使用js进行动态绑定数据问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • 通过flv.js播放监控示例深入探究直播流技术

    通过flv.js播放监控示例深入探究直播流技术

    本文记录一下在使用 flv.js 播放监控视频时踩过的各种各样的坑,虽然官网给的 Getting Started 只有短短几行代码,跑一个能播视频的 demo 很容易,但是播放时各种各样的异常会搞到你怀疑人生,下面我将自己踩过的坑,以及踩坑过程中补充的相关知识,详细总结一下
    2023-10-10
  • javascript cookies 设置、读取、删除实例代码

    javascript cookies 设置、读取、删除实例代码

    javascript cookies 存、取、删除实例,也是不错的文章,跟我们整理的有些补充。
    2010-04-04
  • javascript事件的传播基础实例讲解(35)

    javascript事件的传播基础实例讲解(35)

    这篇文章主要为大家详细介绍了javascript事件的传播基础实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 浅谈JS中this在各个场景下的指向

    浅谈JS中this在各个场景下的指向

    这篇文章主要介绍了浅谈JS中this在各个场景下的指向,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 细说JavaScript中的this指向与绑定规则

    细说JavaScript中的this指向与绑定规则

    本文主要详细介绍了JavaScript中的this指向与绑定规则,默认绑定,隐式绑定,显示绑定,new绑定这四个规则,文中有相关的代码示例供大家参考,感兴趣的同学可以阅读下
    2023-05-05

最新评论