js对象的深入理解(六)
一、对象的创建(四种模式)
1.工厂模式
工厂模式示例:
function createPerson(name,age){
var obj = {
name:name,
age:age,
sayName:function(){}
};
return obj;
}
var p1 = createPerson("tom",12);
var p2 = createPerson("jerry",10);
缺点:
a.创建的对象都是Object类型【无法识别对象】
b.每个对象相同的方法【不存储在相同的存储空间】占据不同的内存空间【对象相同的方法重复创建内存空间,造成内存冗余】
2.构造函数模式
构造函数示例:
function Person(name,age){
this.name = name;
this.age = age;
this.sayName = function(){};
}
var p1 = new Person("tom",12);
var p2 = new Person("jerry",10);
new关键字的作用:
a.创建了一个新实例对象
b.使构造方法中的this【作用域】指向该新实例对象
c.执行构造函数中的代码
d.返回这个新实例对象
优点:可以识别对象
缺点:实例对象的相同方法【不存储在相同的存储空间】在创建实例时均被重复创建【代码、内存冗余】
解决对象相同方法的创建冗余问题:
可以在全局范围中声明一个函数,然后将引用传递给对象中的函数属性。但是这样做会导致全局函数过多,体现不了对象的封装性
3.原型模式
原型模式示例:
function Person(){}
Person.prototype.name = 'tom';
Person.prototype.age = 12;
Person.prototype.sayName = function(){};
var p1 = new Person();
p1.name = 'jerry';
var p2 = new Person;
p2.name = 'terry';
优点:解决了对象的相同方法存储空间重复调用的问题【解决了代码、内存冗余问题】
缺点:同一类型的对象的相同属性共用原型对象中的对应属性的属性值【对象间的隔离性较差】
4.组合模式(构造函数-原型模式)【目前在ECMAScript中使用最广泛,认同度最高的一种创建自定义类型的方法】
a.在构造函数模式中定义对象自身的属性及与其他相同类型对象的不同的方法
b.在原型模式中定义同类型对象的相同方法
组合模式示例:
function Person(name,age){
this.name = name,
this.age = age,
this.friends = []
}
Person.prototype = {
constructor : Person,
sayName:function(){}
}
var p1 = new Person("terry",11);
var p2 = new Person("larry",12);
p1.friends.push("tom");
p2.friends.push("jack");
onsole.log(p1); //["tom"]
console.log(p2); //["jack"]
优点:可以识别对象,也解决了对象的相同方法存储空间重复调用的问题【解决了代码、内存冗余问题】,隔离性较差问题也不存在
二、对象的属性类型
1、对象属性的特性【configurable、enumerable、writable、value】
[[Configurable]]:【默认为true】
a.是否可以使用delete删除该属性值
b.是否可以修改相应属性的特性
[[Enumerable]]:【默认为true】
是否可以通过for-in循环遍历该属性。【是否可枚举】
[[Writable]]: 【默认为true】
是否可以修改相应属性的值。
[[Value]]: 【默认为true】
设置相应属性的数据值 name:jacky
要修改属性默认的特性,必须使用ECMAScript5的Object.defineProperty()方法
访问器属性:【可以隐藏真实属性的数据,利用其对应的访问器属性对外公开展示。即:我们看到的可能不是真正的属性值】
访问器属性不包含数据值,包含一对setter,getter方法。
[[Get]] 在获取属性时调用的函数,默认为undefined
[[Set]] 在写入属性时调用的函数,默认为undefined
修改单个属性特性值需要使用下面方法:
defineProperty(属性所在的对象,属性的名字,一个描述符对象);
当configurable:false 时,不能修改该属性特性的特性值
2.对属性特性的相关操作方法【使用下面方法定义的属性其configurable特性值一般为false】
a、Object.defineProperty(属性对应的对象,属性的名字,一个描述符对象)【定义单个属性】
eg:
var obj = {
name:'tom',
age:21
};
Object.defineProperties(obj,'name'{
writable:false //obj对象中的name属性不可修改
});
obj.name = 'jerry'; //这条语句无效,name属性的writable特性值为false不可修改
b、Object.defineProperties(属性对应的对象,所需要定义的多个属性的描述对象)【定义多个属性】
eg:
var obj = {
name:'tom',
_age:21
};
Object.defineProperties(book,{
_age:{//数据属性
value:22,
configurable:false //_age属性不能delete,不能重新定义该属性
},
age:{//访问器属性
get:function(){
return this._age-2
},
set:function(age){
this._age = age
}
}
});
console.log(obj.age); //20
c、Object.getOwnPrototypeDescriptor(属性对应的对象,属性的名字)【读取属性的特性信息】
var descriptor = Object.getOwnPropertyDescriptor(obj,"_age");
console.log(descriptor.value); //
console.log(descriptor.configurable) //false
js对象的深入理解(六)的更多相关文章
- JS对象原型的理解
基于原型的语言 JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板.从原型继承方法和属性.原型对象 ...
- js对象详解(JavaScript对象深度剖析,深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
- js对象系列【一】深层理解对象与原型
我们先从盘古开天辟地时捋一捋对象: 从宏观内容来讲,javascript是一个属性的集合,包括值,函数,而整个集合也可以类比为一个对象. js = { a的变量名: a的值, ... 函数b: fun ...
- js 模块化的一些理解和es6模块化学习
模块化 1 IIFE 2 commonjs 3 浏览器中js的模块化 4 简单理解模块加载器的原理 5 es6 之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式( ...
- js赋值运算的理解
简介 js引擎由于为了效率,很多时候的非直接量赋值都不是copy一份在赋值给新的变量,而是一个引用 ps:直接量:直接值数字字符串等 为什么使用len = doms.length; 里的len效率要比 ...
- JSON与js对象序列化
JavaScript对象表示法(JavaScript Object Notation,简称JSON)是一种轻量级的数据交换格式,它基于js字面量表示法,是js的一个子集.虽然是一个js的子集但是他与语 ...
- js 对象深复制,创建对象和继承
js 对象深复制,创建对象和继承.主要参考高级编程第三版,总结网上部分资料和自己的代码测试心得.每走一小步,就做一个小结. 1.对象/数组深复制 一般的=号传递的都是对象/数组的引用,如在控制台输入 ...
- 我对 impress.js 源码的理解
源码看了两天,删掉了一些优化,和对 ipad 的支持,仅研究了其核心功能的实现,作以下记录. HTML 结构如下: <!doctype html> <html lang=" ...
- [JS] 面向对象的5种写法和拓展JS对象的写法
面向对象的JAVA 最开始当然是对象的定义了 收集了以下的五种写法 //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; C ...
随机推荐
- Cesium原理篇:6 Render模块(3: Shader)【转】
https://www.cnblogs.com/fuckgiser/p/5975274.html 在介绍Renderer的第一篇,我就提到WebGL1.0对应的是OpenGL ES2.0,也就是可编程 ...
- [转]初识NuGet - 概念, 安装和使用
1. NuGet是什么? NuGet is a Visual Studio 2010 extension that makes it easy to add, remove, and update l ...
- Learning to Track Any Object
Learning to Track Any Object 2019-10-28 12:14:49 Paper: https://arxiv.org/abs/1910.11844 1.
- 微信token介绍
这里的微信token 有以下三种 1.小程序的token (appid+appsecret=token) 2.一个是第三方平台token(comment_appid+comment_appsecre ...
- pd.ExcelWriter(to_excel)保存结果到已存在的excel文件中
网易云课堂该课程链接地址 https://study.163.com/course/courseMain.htm?share=2&shareId=400000000398149&cou ...
- 公司-IT-Yahoo:百科
ylbtech-公司-IT-Yahoo:百科 雅虎(英文名称:Yahoo!,NASDAQ:YHOO)是美国著名的互联网门户网站,也是20世纪末互联网奇迹的创造者之一.其服务包括搜索引擎.电邮.新闻等, ...
- 超简易简易PHP爬虫
利用CURL和DOMDocument.通过xpath筛选数据,实现的简易PHP爬虫 <?php header('Content-type: text/plain; charset=utf-8') ...
- 使用PyTorch简单实现卷积神经网络模型
这里我们会用 Python 实现三个简单的卷积神经网络模型:LeNet .AlexNet .VGGNet,首先我们需要了解三大基础数据集:MNIST 数据集.Cifar 数据集和 ImageNet 数 ...
- ajaxSubmit的data属性
https://www.cnblogs.com/shiyou00/p/6841801.html js-art-template 修改一处代码的时候发现了让我疑惑的地方.ajaxSubmit的data用 ...
- python os.popen('xxx.py') 遇到的坑 (No Child Processes)
1.调用系统库 platform.system() 报错: 2.os.popen() 打开的文件流未关闭也会出现这种错误. f = os.popen() f.read() f.close() 问题复现 ...