详解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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
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
mac下多个php版本快速切换的方法
2016/10/09 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
python最长回文串算法
2018/06/04 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
pytorch 求网络模型参数实例
2019/12/30 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
浅析Python requests 模块
2020/10/09 Python
互动出版网:专业书籍
2017/03/21 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
一年级班主任寄语
2014/01/19 职场文书
大学旷课检讨书
2014/01/28 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
2015政治思想表现评语
2015/03/25 职场文书
运动会跳远广播稿
2015/08/19 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python
SQL注入详解及防范方法
2021/12/06 MySQL