js对象的创建模式
方式一: Object构造函数模式 * 套路: 先创建空Object对象, 再动态添加属性/方法
* 适用场景: 起始时不确定对象内部数据
* 问题: 语句太多
/*
一个人: name:"Tom", age: 12
*/
// 先创建空Object对象
var p = new Object()
p = {} //此时内部数据是不确定的
// 再动态添加属性/方法
p.name = 'Tom'
p.age = 12
p.setName = function (name) {
this.name = name
} //测试
console.log(p.name, p.age)
p.setName('Bob')
console.log(p.name, p.age)
方式二: 对象字面量模式
* 套路: 使用{}创建对象, 同时指定属性/方法
* 适用场景: 起始时对象内部数据是确定的
* 问题: 该方式的劣势比较明显,就是无法复用,如果创建大量同类型的对象,则代码会非常冗余
var p = {
name: 'Tom',
age: 12,
setName: function (name) {
this.name = name
}
}
//测试
console.log(p.name, p.age)
p.setName('JACK')
console.log(p.name, p.age)
var p2 = { //如果创建多个对象代码很重复
name: 'Bob',
age: 13,
setName: function (name) {
this.name = name
}
}
方式三: 工厂模式(利用内置对象的方式创建对象)
* 套路: 通过工厂函数动态创建对象并返回
* 适用场景: 需要创建多个对象
* 问题: 对象没有一个具体的类型, 都是Object类型,没办法判断类型
function createObj(name, age) { //返回一个对象的函数===>工厂函数
var obj = {
name: name,
age: age,
setName: function (name) {
this.name = name
}
}
return obj
}
// 创建2个人
var p1 = createObj('Tom', 12)
var p2 = createObj('Bob', 13)
console.log(p1.constructor) // Object 指向的构造函数是Object
console.log(p2.constructor) // Object 指向的构造函数是Object
// p1/p2是Object类型
// 那么为什么说没办法判断类型呢?那么我们创建一条狗的对象
// 可以看出,狗的constructor也是指向Object,那么我们人和狗的类型就没办法去区分了
let dog = createObj('二哈',10)
console.log(dog.constructor) // Object 指向的构造函数是Object
function createStudent(name, price) {
var obj = {
name: name,
price: price
}
return obj
}
var s = createStudent('张三', 12000)
// s也是Object
方式四: 自定义构造函数模式
* 套路: 自定义构造函数, 通过new创建对象
* 适用场景: 需要创建多个类型确定的对象
* 问题: 每个对象都有相同的数据, 浪费内存
function Person(name,age){
// 1.系统自动创建对象,并且把这个对象赋值到this上,此步不需要我们操作
// let this = new Object()
// 2.给这个对象赋属性、方法,需要我们自己操作
this.name = name
this.age = age
this.eat = function(){
console.log(name + '吃饭')
}
// 3.系统自动返回创建的对象
// return this
}
let p1 = new Person("leah",28)
console.log(p1.constructor) // Person 指向的构造函数是Person
function Dog(name,age){
this.name = name
this.age = age
}
let dog = new Dog("二哈",10)
console.log(dog.constructor) // Dog 指向的构造函数是Dog
默认是返回新创建的对象,特别需要注意的是
如果显式return一个对象数据类型,那么将来new的对象,就是显式return的对象
// 当我们显式return一个原始数据类型
function Person(name,age){
this.name = name
this.age = age return "1"
} let p = new Person("leah",28) // { name: 'leah', age: 28 } // 当我们显式return一个对象数据类型时
function Person(name,age){
this.name = name
this.age = age return [1,2,3]
} let p = new Person("leah",28) // [ 1, 2, 3 ]
// 我们发现,当显式return一个对象数据类型时,我们new出来的对象,得到的是return的值
方式六: 构造函数+原型的组合模式
* 套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
* 适用场景: 需要创建多个类型确定的对象
function Person(name, age) { //在构造函数中只初始化一般函数
this.name = name
this.age = age
}
Person.prototype.setName = function (name) { //共享方法绑定到prototype上
this.name = name
}
var p1 = new Person('Tom', 23)
var p2 = new Person('Jack', 24)
console.log(p1, p2)
js对象的创建模式的更多相关文章
- JavaScript(对象的创建模式)
JavaScript和其他语言略有不同,在JavaScript中,引用数据类型都是对象(包括函数).不过,在JavaScript中并没有“类”的概念,这决定了在JavaScript中不能直接来定义“类 ...
- js对象的创建
一.通过对象直接量来创建 var emptyt={}; //相当于var empty=new Object; //如果属性名中包含空格.连字符(-).还有关键字,保留字时,要用字符串表示 var b ...
- js对象2--工厂模式的由来--杂志
一:工厂模式引入前提例子 先看一个案例 <script type="text/javascript"> var person= new Object(); //创建一个 ...
- js 对象的创建方式和对象的区别
js一个有三种方法创建对象,这里做一个总结. 1.对象直接量 所谓对象直接量,可以看做是一副映射表,这个方法也是最直接的一个方法,个人比较建议, 1 2 3 4 5 6 7 8 9 10 11 12 ...
- js对象的创建与原型总结
//1 新建对象 var box = new Object(); box.name = "lee"; box.age = 100; box.run = function(){ re ...
- Javascript对象的创建模式 -- 深入了解Javascript
/* 一.模式1:命名空间(namespace) 优点:减少全局命名所需的数量,避免命名冲突或过度 */ // 更简洁的方式 var MYAPP = MYAPP || {}; //定义通用方法 MYA ...
- JS对象的创建与使用
本文内容: 1.介绍对象的两种类型: 2.创建对象并添加成员: 3.访问对象属性: 4.利用for循环枚举对象的属性类型: 5.利用关键字delete删除对象成 ...
- js 对象创建设计模式
创建js对象可以使用多种模式,每种模式有着不同的特点:如下: 1.工厂模式:创建一个函数,在函数中实例化一个对象,当每次调用函数时,就实例化一个对象,并返回这个对象: 我们知道,对象是引用形式的,每次 ...
- js对象的几种创建方式和js实现继承的方式[转]
一.js对象的创建方式 1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); ...
随机推荐
- Opencv中copyTo()函数的使用方法
在Mat矩阵类的成员函数中copyTo(roi , mask)函数是非常有用的一个函数,尤其是后面的mask可以实现蒙版的功能,我们用几个实例来说明它的作用.我们要注意mask的数据类型,必须是CV_ ...
- Scratch少儿编程系列:(十)系列总结及后续计划
一.系列文章的来由 本篇为该系列文章的一个简单总结, 从初次接触Scratch开始,在写本系列文章过程中,一边读书,一边通过例子做练习. 技术实现,对于我跟人来说,没有什么难度. 我相信,对于一个初次 ...
- angular - ngFor, trackby
ngFor ngForOf指令通常使用缩写形式*ngFor为集合中的每个项呈现模板的结构指令.该指令放置在元素上,该元素将成为克隆模板的父级. <li *ngFor="let item ...
- [codeforces940E]Cashback
题目链接 题意是说将$n$个数字分段使得每段贡献之和最小,每段的贡献为区间和减去前$\left \lfloor \frac{k}{c}\right \rfloor$小的和. 仔细分析一下可以知道,减去 ...
- 洛谷 P1073 最优贸易 题解
题面 大家都是两遍SPFA吗?我这里就一遍dp啊: 首先判断对于一个点u,是否可以从一号点走到这里,并且可以从u走到n号点: 对于这样的点我们打上标记: 那么抛出水晶球的点一定是从打上标记的点中选出一 ...
- 洛谷 P1508 Likecloud 题解
题面 很简单的一个二维DP f[i][j]表示最后吃到(i,j)所能获得的最大值, 那么f[i][j]=max(f[i+1][j-1],f[i+1][j],f[i+1][j+1])+a[i][j]; ...
- Tarjan水题系列(5):最大半连通子图 [ZJOI2007 luogu P2272]
题目 大意: 缩点后转为求最长链的长度和最长链的个数 思路: 看懂题就会做系列 长度和个数都可以拓扑排序后DP求得 毕竟是2007年的题 代码: 如下 #include <cstdio> ...
- day16 常用模块 sys os json pickle
知识点 os:和操作系统相关sys:和解释器相关 json:和操作JSON(一种数据交换格式)相关pickle:序列化 hashlib:加密算法Collections:集合类型 ...
- oracle三种表连接方式
1. 排序合并连接(Sort Merge Join) 排序合并连接的执行过程如下所示: * 将每个行源的行按连接谓词列排序 * 然后合并两个已排序的行源,并返回生成的行源 例如: select * f ...
- Java中的==和equals( )方法
在Java中,equals和==都是用于检测两个字符串是否相等,返回类型也都是boolean值,但是二者内部处理却不一样. ==与equals( ) ==在Java中是一个二元操作符,用于比较原生类型 ...