详解js创建对象的几种方式和对象方法


Posted in Javascript onMarch 01, 2021

这篇文章是看js红宝书第8章,记的关于对象的笔记(第二篇)。

创建对象的几种模式:

工厂模式:

工厂是函数的意思。工厂模式核心是定义一个返回全新对象的函数。

function getObj(name, age) {
  let obj = {}
  obj.name = name
  obj.age = age
  return obj
 }
 let person1 = getObj("cc", 31)

缺点:不知道新创建的对象是什么类型

构造函数模式:

通过一个构造函数,得到一个对象实例。
构造函数和工厂模式区别是:
1,构造函数函数体加了this
2,构造函数没有return
3,构造函数调用时,用new关键字

function CreateObj(name, age) {
  this.name = name
  this.age = age
 }
 let person1 = new CreateObj("cc", 31)
 console.log(person1)
 console.log(person1.constructor === CreateObj); // true
 console.log(person1 instanceof CreateObj); // true

关于构造函数的两个问题:

1,构造函数和普通函数唯一区别是调用方式。构造函数要用new关键字。如果不用new,则是往Global对象上加属性。下面例子中,CreateObj方法,往window对象上加了name和age属性

function CreateObj(name, age) {
  this.name = name
  this.age = age
 }
 CreateObj('cc', 10)
 console.log(window.name) // 'cc'

2,构造函数存在的问题: 构造函数体内的方法,每次创建一个实例,都会创建一遍。

person1.sayName( ) === person2.sayName( ) // false

解决方法是,将sayName定义在createObj外面。

function sayName() {
  console.log(this.name)
 }
 function CreatePerson(name, age) {
  this.name = name
  this.age = age
  this.sayName = sayName
 }
 let person1 = new CreatePerson('joy', 31)
 person1.sayName()

但是,这样会让自定义类型引用的代码不能很好聚在一起。

原型模式:

原理是,每个函数都有一个prototype属性。prototype是一个对象,里面定义的属性和方法会被所有实例共享。
关于原型模式,有两个等式:

function Person() { }
 let person1 = new Person()
 console.log(person1.__proto__ === Person.prototype)  // true
 console.log(Person.prototype.constructor === Person); // true

关于原型对象的三个方法:isPrototype , getPrototypeof,setPrototypeOf, Object.create()

// isPrototypeOf判断构造函数的原型对象是否是实例的原型对象
function Person() {}
 let person1 = new Person()
 console.log(Person.prototype.isPrototypeOf(person1)); // true
// 获取对象的原型对象
 function Person() {}
 let person1 = new Person()
 console.log(Object.getPrototypeOf(person1) === Person.prototype);
// 将某个对象,设为另一个对象的原型对象
 let person1 = {name: "cc"}
 let person2 = {age: 32}
 Object.setPrototypeOf(person1,person2)
 console.log(person1.name, person1.age); // cc 32
// 以某个对象为原型对象,创建一个新对象  
let person1 = {name: "cc"}
 let person2 = Object.create(person1)
 person2.age = 30
 console.log(person2.name, person2.age);

当访问一个对象person的name属性时,是按照以下步骤去访问:
1,person上如果有name属性(即便这个属性是null,也会返回null),返回name属性值;没有,继续去原型对象Person.prototype上找
2,如果原型上有name属性,返回原型上name属性值;没有,则返回undefined

判断一个属性是在实例上,还是在原型上,可以用hasOwnProperty

function Person() {}
 Person.prototype.name = "cc"
 let person1 = new Person()
 console.log(person1.name) // 'cc'
 console.log(person1.hasOwnProperty("name")); // false

判断一个对象上是否有个某个属性,用in操作符

// 对象自身 or 原型上找到,都返回true 
function Person() {}
 Person.prototype.name = "cc"
 let person1 = new Person()
 console.log("name" in person1) // true
 console.log(person1.hasOwnProperty("name")); // false

访问对象的属性的方法:

Object.keys( )
for ... in // 继承属性也会遍历出来
Object.getOwnPropertyNames(obj) // 会列出可枚举和不可枚举属性,其他和 Object.keys( )结果一样
Object.getOwnPropertySymbols(obj) // 和getOwnPropertyNames类似,只是仅针对symbol
Reflect.ownKeys(obj) // 和Object.keys( )结果一样

其他访问对象属性和属性值的方法:
Object.values( ) 对象值组成的数组,会省掉Symbol型。
Object.entries( ) 对象键值对组成的数组,会将键,转化成字符串,省掉Symbol型。

function Person() {}
 Person.prototype.name = "cc"
 let person = new Person()
 person.age = 21
 let sy = Symbol('sy')
 person[sy] = 'smile'
 console.log(Object.values(person)) // [ 21 ]
 console.log(Object.entries(person)) // [ [ 'age', 21 ] ]

到此这篇关于详解js创建对象的几种方式和对象方法的文章就介绍到这了,更多相关js创建对象内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
React diff算法的实现示例
Apr 20 Javascript
对node.js中render和send的用法详解
May 14 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 #Vue.js
vue实现拖拽进度条
Mar 01 #Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 #Vue.js
js闭包和垃圾回收机制示例详解
Mar 01 #Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 #Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 #Vue.js
vue-router懒加载的3种方式汇总
Feb 28 #Vue.js
You might like
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
Google Maps API地图应用示例分享
2014/10/23 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
python实现telnet客户端的方法
2015/04/15 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
Python多继承顺序实例分析
2018/05/26 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
高级电工工作职责
2013/11/21 职场文书
大四本科生的自我评价
2013/12/30 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
《我是什么》教学反思
2016/02/16 职场文书
Python之matplotlib绘制饼图
2022/04/13 Python
Redis+AOP+自定义注解实现限流
2022/06/28 Redis
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android