JavaScript对象的创建模式与继承模式示例讲解
作者:花铛 发布时间:2024-04-23 09:27:40
对象的创建模式
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)
来源:https://blog.csdn.net/wsln_123456/article/details/123256735
猜你喜欢
- 本文以实例形式展示了Python获取电脑硬件信息及状态的实现方法,是Python程序设计中很有实用价值的技巧。分享给大家供大家参考之用。具体
- 前言本文做的是基于三层神经网络实现手写数字分类,神经网络设计是设计复杂深度学习算法应用的基础,本文将介绍如何设计一个三层神经网络模型来实现手
- 起步这是许多开发者在项目初期要面临的一个普遍问题。要怎样来处理多用户类型。本文讲介绍对于不同场景和业务需求如何设计用户模型。为项目提供指导设
- python查找多层嵌套字典的值def find_dic(item, key): if isinstance(it
- 有时候我们会在页面上显示用户的所在地区,这个原理是:先得到用户的IP,然后去查询将IP转换成一个数值,最后去查这个数值所在的范围,来得到用户
- 0 引言年中购物618大狂欢开始了,各大电商又开始了大力度的折扣促销,我们的小胖又给大家谋了一波福利,淘宝APP直接搜索:小胖发福利,每天领
- 随着互联网的高速发展,人们对安全的要求也越来越高。密码学中两大经典算法,一个是对称加解密,另一个是非对称加解密,这里就来分享一下非对称加密算
- 今天刷二级题的时候,遇到一个问题>>> L2=[1,2,3,4]>>> L3=L2.reverse()&
- 开源方:微软安装:pip install playwright;python -m playwright install特点:自动化脚本录制
- ESLint简介关于ESLint的介绍网上很多,这里就简单说些有用的。 ESLint的作用是检查代码错误和统一代码风格的。由于每个人写代码的
- HTTP短连接(非持久连接)是指,客户端和服务端进行一次HTTP请求/响应之后,就关闭连接。所以,下一次的HTTP请求/响应操作就需要重新建
- 图形用户界面 (GUI)图形用户界面 (GUI) 只不过是一个桌面应用程序,可帮助我们与计算机进行交互像文本编辑器这样的 GUI 应用程序可
- 前言pytest是一款强大的python自动化测试工具,可以胜任各种类型或者级别的软件测试工作。pytest提供了丰富的功能,包括asser
- 简介imgaug:机器学习实验中的图像增强库,特别是卷积神经网络。支持以多种不同方式增强图像、关键点/地标、边界框、热图和分割图。安装在an
- 析构函数__del__定义:在类里定义,如果不定义,Python 会在后台提供默认析构函数。析构函数__del__调用:A、使用del 显式
- 四年前写的一个内容管理系统,应用在公司内部网上,昨天DBA说其中的SQL语句未使用参数化的调用,导致服务器负担加重,资源占用大。并列出了几个
- 首先,大家先去下载一份dvbbs.php beta1的代码,解压后先抛开php代码,找出你的mysql手册,如果没有手册那么就直接看下面的实
- 本文实例讲述了JS实现文字放大效果的方法。分享给大家供大家参考。具体实现方法如下:<!DOCTYPE html PUBLIC &quo
- 定义计算N的阶乘的函数1)使用循环计算阶乘def frac(n): r = 1 if n<=1:
- breakbreak可以用来立即退出循环语句(包括else)continuecontinue可以用来跳过当次循环注意:break和conti