JS中对象创建的五中方式
2024-05-13 13:08:56
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>01_Object构造函数模式</title>
</head>
<body>
<!--
方式一: Object构造函数模式* 套路: 先创建空Object对象, 再动态添加属性/方法* 适用场景: 起始时不确定对象内部数据* 问题: 语句太多
-->
<script type="text/javascript">/*一个人: name:"Tom", age: 12*/var p = new Object()p = {}p.name = 'Tom'p.age = 12p.setName = function (name) {this.name = name}p.setaAge = function (age) {this.age = age}console.log(p)</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>02_对象字面量</title>
</head>
<body>
<!--
方式二: 对象字面量模式* 套路: 使用{}创建对象, 同时指定属性/方法* 适用场景: 起始时对象内部数据是确定的* 问题: 如果创建多个对象, 有重复代码
-->
<script type="text/javascript">var p = {name: 'Tom',age: 23,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: 24,setName: function (name) {this.name = name}}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>03_工厂模式</title>
</head>
<body>
<!--
方式三: 工厂模式* 套路: 通过工厂函数动态创建对象并返回* 适用场景: 需要创建多个对象* 问题: 对象没有一个具体的类型, 都是Object类型
-->
<script type="text/javascript">// 工厂函数: 返回一个需要的数据的函数function createPerson(name, age) {var p = {name: name,age: age,setName: function(name){this.name = name}}return p}var p1 = createPerson('Tom', 12)var p2 = createPerson('JAck', 13)console.log(p1)console.log(p2)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>04_自定义构造函数模式</title>
</head><body>
<!--
方式四: 自定义构造函数模式* 套路: 自定义构造函数, 通过new创建对象* 适用场景: 需要创建多个类型确定的对象* 问题: 每个对象都有相同的数据, 浪费内存
-->
<script type="text/javascript">function Person(name, age) {this.name = namethis.age = agethis.setName = function (name) {this.name = name}}var p1 = new Person('Tom', 12)var p2 = new Person('Tom2', 13)console.log(p1, p1 instanceof Person)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>05_构造函数+原型的组合模式</title>
</head>
<body>
<!--
方式六: 构造函数+原型的组合模式* 套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上* 适用场景: 需要创建多个类型确定的对象
-->
<script type="text/javascript">function Person (name, age) {this.name = namethis.age = age}Person.prototype.setName = function (name) {this.name = name}var p1 = new Person('Tom', 12)var p2 = new Person('JAck', 23)p1.setName('TOM3')console.log(p1)Person.prototype.setAge = function (age) {this.age = age}p1.setAge(23)console.log(p1.age)Person.prototype = {}p1.setAge(34)console.log(p1)var p3 = new Person('BOB', 12)p3.setAge(12)
</script>
</body>
</html>
JS中对象创建的五中方式相关推荐
- JS 中对象的深浅拷贝（ES3、ES5、ES6不同方法底层实现，一文搞清楚深浅拷贝面试常问题）
JS 中对象的深浅拷贝 拷贝我们都知道这个词的意思,我们经常做过复制.粘贴的操作,其中的复制就是拷贝,那么在拷贝的时候,如果我们复制出来的内容和原内容是完全的分开,各自不相影响,那么这就属于深拷贝 ...
- JS中对象按属性排序（冒泡排序）
原文地址 https://www.cnblogs.com/it-Ren/p/10898947.html 一路向北√ 越努力,越幸运. JS中对象按属性排序(冒泡排序) 冒泡排序:它重复地走访过要排序的 ...
- JS中对象key为数字的使用
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>JS中 ...
- js中对象数组根据对象id分组并转map
js中对象数组根据对象id分组并转map 如果要将具有相同 id 属性的对象元素,分成不同的数组. 可以先从对象数组中提取相同的 id 属性,再使用 Array.reduce() 和 Map 来进行对 ...
- js中对象参数的传递
js中对象参数传递都是按值传递,当参数为对象时,传递的是对象的引用地址,函数中改变对象参数的值时,会影响函数外的该对象.但为对象参数重新赋值时,相当于改变了其引用地址,将其指向了其它内存地址,故自然不 ...
- 第163天：js面向对象-对象创建方式总结
面向对象-对象创建方式总结 1. 创建对象的方式,json方式 推荐使用的场合: 作为函数的参数,临时只用一次的场景.比如设置函数原型对象. 1 var obj = {}; 2 //对象有自己的 属性 ...
- JS 中对象的简单创建和继承
对象的简单创建 1.通过对象直接量创建 比如 var obj = {}; 2.通过new 创建 比如 var obj = new Object(); // 相当于var obj = {}; var a ...
- js中对象当做参数传递是否改变自身
先套用js高程一句话--ECMAScript 中所有函数的参数都是按值传递 什么叫做按值传递??? 可以简单理解为生成一个新的变量和需要传递的参数的值一样,就像把值从一个变量复制到另一个变量一样. v ...
- 一个简单的 js 时间对象创建
JS中获取时间很常见,凑凑热闹,也获取一个时间对象试试 首先,先了解js的获取时间函数如下: var myDate = new Date(); //创建一个时间对象 myDate.g ...
最新文章
- 2019元月新SAP项目落地记
- go run/ go install/ go build / go get的区别
- linux ssh 隧道 tunnel 一般场景用法
- pytorch基础知识整理（三）模型保存与加载
- (010) Linux之I/O重定向
- FreeBSD Chinese HOWTO
- apache ab压力测试报错
- 使用python 对图片进行水印，保护自己写的文章
- （软件工程复习核心重点）第六章实现和测试-第一节：编码
- 基于JAVA+SpringBoot+Mybatis+MYSQL的仿天猫商城
- 电脑大小写怎么切换_小白买了Mac pro电脑学会基本操作
- Haswell 事务内存相关的一些资源介绍
- web端四方支付 只有安卓可以跳转
- 《SEM长尾搜索营销策略解密》一一2.14 3M的奇思妙想，原来来自长尾
- 计算机专业本科一批,本科一批招生计划
- 导入导出软件测试点,导入导出问题-TestCenter测试管理工具常见问题-SPASVO泽众软件测试网...
- 国产十大手表品牌有哪些？值得买的中国手表品牌推荐
- linux替换屏幕保护进程,有没有一个体面的方式来阻止linux中的屏幕保护程序？...
- 青梅酒太多不知该怎么选？记得你爱吃 的口味就可以
- 本地调试微信之内网穿透 ngrok/frp
热门文章
- hbuilderx怎么添加断点_【高考语文题库】高考一直提分提不上去该怎么办？同一卷高考押题语文答案，助你再提30分...
- 2018 ICPC Asia Jakarta Regional Contest J. Future Generation 状压dp
- 多层图，dj+dp Gym 102501A Environment-Friendly
- Acwing 271. 杨老师的照相排列
- D - Maximum Value Problem FZU - 2037
- Musical Theme pku1743 (后缀数组)
- 模板：后缀数组（SA）
- CF438E-The Child and Binary Tree【生成函数】
- P3338-[ZJOI2014]力【FFT】
- 【AC自动机】AC自动机（二次加强版）（luogu 5357）