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 ...
随机推荐
- Transform the vot dataset into 4 corner format
Transform the vot dataset into 4 corner format Matlab code to change the 8 value ground truth into 4 ...
- Intelij idea 中文字体渲染异常解决方法
当 Font 选择的字体无法渲染时,则尝试使用该选项所选择的字体渲染.
- ABAP基础篇2 数据类型
基本数据类型列表: 1.长度可变的内置类型(String.XString)1)string类型 在ABAP程序中,string类型是长度无限的字符型字段,可以和CHAR ,D,T ,I,N (F和P未 ...
- [Golang] go modules使用
关于go modules的使用外面的教程实在太多了,我这里只讲下我自己使用的三种情形. 准备工作: 1.新建个文件加gomod_test. 2.在这个目录输入命令 go mod init gomod_ ...
- [ ceph ] BlueStore 存储引擎介绍
为什么需要 BlueStore 首先,Ceph原本的FileStore需要兼容Linux下的各种文件系统,如EXT4.BtrFS.XFS.理论上每种文件系统都实现了POSIX协议,但事实上,每个文件系 ...
- react-navigation安卓从右到左切换视图
百度搜了3天都没一个正确的答案,最后还是google查到的: "react-navigation": "^4.0.10", "react-navi ...
- C#.NET LoadXml 时 “根级别上的数据无效。 行 1,位置 1”
去除XML HEADER: <?xml version="1.0" encoding="utf-8"?> if (rspBusiXml.Contai ...
- git中配置的.gitignore不生效的解决办法
通常我们希望放进仓库的代码保持纯净,即不要包含项目开发工具生成的文件,或者项目编译后的临时文件.但是,当我们使用git status查看工作区状态的时候,总会提示一些文件未被track.于是,我们想让 ...
- docker swarm集群搭建及使用Portainer、shipyard
一.规划 1.swarm01作为manager节点,swarm02和swarm03作为worker节点. # cat /etc/hosts 127.0.0.1 localhost 192.168. ...
- 湖南省第十三届大学生计算机程序设计竞赛 Football Training Camp 贪心
2007: Football Training Camp[原创-转载请说明] Submit Page Summary Time Limit: 1 Sec Memory Limit: 1 ...