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中pack()方法#Copyright (c)2017, 东北大学软件学院学生# All rightsreserved#文件名称
- 前言selenium处理文件上传大致会有两种情况,一种是文件上传使用的是input标签元素,即<input type="fi
- 方法1:使用Python中自带的print输出带有颜色或者背景的字符串书写语法print(\033[显示方式;前景色;背景色m输出内容\03
- 本文实例讲述了flask框架单元测试原理与用法。分享给大家供大家参考,具体如下:为什么要测试?Web程序开发过程一般包括以下几个阶段:[需求
- 随机显示图片代码:<div class="sidebarcen"><script language=&
- # -*- coding: utf-8 -*-import sysimport MySQLdbreload(sys)sys.setdefau
- Python中几种常用包比较2、用xlrd包读取Excel文件引用包import xlrd打开文件xlrd.open_workbook(r&
- 过去一段时间人们似乎又非常热衷于探讨网络文档的印刷格式,涌现了很多与之相关的技术与理论资料,其中相当重要的一个领域就是关于印刷中字号和行高的
- 之前博客有用logstash-input-jdbc同步mysql数据到ElasticSearch,但是由于同步时间最少是一分钟一次,无法满足
- 远程登录控制台Scrapy附带一个内置的telnet控制台,用于检查和控制Scrapy运行过程。telnet控制台只是一个运行在scrapp
- 现在很多地方都需要用到关键词过滤功能。比如一般的服务器都不允许一些词出现在网页上,站长有时候会对在本网站发布信息的内容进行一个广告过滤等。雨
- 环境准备:1.安装python3.7和相关的依赖并安装redis缓存数据库pip install aliyun-python-sdk-cor
- PHP 跳转,即重定向浏览器到指定的 URL,是一个很常见的功能。这种功能也有一些细节性的要求,比如等待多少秒以后跳转,用不用JavaScr
- 互联网上不计其数的信息本质上都是一个一个的HTML文档组成的,通过链接将它们串联起整个互联网。这就犹如骨肉之于人体一样,只有通过经脉才能将它
- """This module contains code fromThink Python by Allen
- 前言异常值是指样本中的个别值,也称为离群点,其数值明显偏离其余的观测值。常用检测方法3σ原则和箱型图。其中,3σ原则只适用服从正态分布的数据
- 所谓网页抓取,就是把URL地址中指定的网络资源从网络流中读取出来,保存到本地。 在Python中有很多库可以用来抓取网页,我们先学习urll
- 有时候,为了获取查询结果的部分数据,需要对变量进行一些处理,在网上查了一圈,只发现了这两个方法:返回查询结果的切片在返回给前端的结果中,通过
- 最近在改个程序用到了在js中设置css的float属性,以为和平常的写法一样,原来不是,只好去请教google,原来...首先大家先来看一下
- 这篇文章主要介绍了python错误调试及单元文档测试过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需