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 ...
随机推荐
- Cookie的Secure属性和HttpOnly属性
基于安全的考虑,需要给cookie加上Secure和HttpOnly属性,HttpOnly比较好理解,设置HttpOnly=true的cookie不能被js获取到,无法用document.cookie ...
- 工具推荐--Mac下画图软件:Omnigraffle
场景描述: 日常工作中,开发的小伙伴可能会遇到,需要画流程图,架构图,时序图,UML图,网络拓扑图...等等各种图,有的小伙伴用Visio,ProcessOn,亿图图示......又是一堆软件,先不说 ...
- JDBC连接抽象方法的使用例子
package com.zdlt.auth.api.base.datasource; import java.sql.*; import java.util.ArrayList; import jav ...
- android分渠道打包,监测日活量统计(基于友盟SDK)
客服说要看App日活,让加个统计功能. (我们技术部已经混到客服部都能直接提需求的地步) 首先接入友盟统计的SDK,在项目外层的build.gradle中添加依赖'https://dl.bintray ...
- Ubuntu下卸载anaconda
转载:https://blog.csdn.net/m0_37407756/article/details/77968724(一)删除整个anaconda目录: 由于Anaconda的安装文件都包含在一 ...
- python初级(302) 6 对象(四)
一.复习 1.什么是多态 2.复习上一节课内容 class Triangle: """ 三角形类 """ def __init__(self ...
- 自定义程序启动脚本加入到supervisord下管理
ubuntu14.04 系统,直接通过apt-get安装即可 apt-get install supervisord 官网:http://www.supervisord.org/ 主配置文件 这个配置 ...
- 记录一次TraceId的问题
多服务部署的时候,各个服务通过httpClient进行调用时候,有时候出现问题,需要进行追查.但是如果没有一个标记,就会很迷茫,特别是多个服务来回调用,就无法快速定位问题.这个时候一般是使用MDC的 ...
- HTML5 VUE单页应用 SEO 优化之 预渲染(prerender-spa-plugin)
前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是 单页面 应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而 ...
- jq同一页面内容切换
$(function() { //选择标题显示 初始显示内容及样式 $('.right-content .right-item').eq(0).addClass('showcontent') $('. ...