JS 对象
原始类型通过new的方式可以转化为对象
对象的赋值语句是浅拷贝
访问属性
objectName.property // person.age
objectName["property"] // person["age"]
objectName[expression] // x = "age"; person[x]
新增属性
//若赋值不存在的属性就会自动新增
objectName.newProperty = "English";
删除属性
delete 关键字 同时删除属性的值和属性本身
添加对象方法
methodName : function() { 代码行 }
访问对象方法
objectName.methodName()
//带括号调用方法,不带括号获取属性值
对象访问器 Getter和Setter (ES5)
get和set关键字
定义访问和操作提供同名入口函数(由于使用方法可操作性很强,如输出大写等)
调用时和调用属性没什么区别
调用时自动识别是get还是set
// Create an object:
var person = {
firstName: "Bill",
lastName : "Gates",
language : "en",
get lang() {
return this.language.split(',');
},
set lang(value) {
this.language += ',' + value;
}
};
// 使用 set 设置属性:
person.lang = "zh";
person.lang = "jp";
//person.language:"en,zh,jp"
//person.lang => ["en", "zh", "jp"]
Object.defineProperty(对象名,属性名,get/set : function () { 代码行 })
方法也可用于添加 Getter 和 Setter
对象构造器
就相当于其他语言构造函数
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
可以通过new的方式来创建对象。
普通方式无法在构造器之外对其添加新的属性和方法。
- 请使用对象字面量 {} 代替 new Object()。
- 请使用字符串字面量 “” 代替 new String()。
- 请使用 数值字面量代替 Number()。
- 请使用 布尔字面量代替 new Boolean()。
- 请使用数组字面量 [] 代替 new Array()。
- 请使用 模式字面量代替 new RexExp()。
- 请使用函数表达式 () {} 代替 new Function()。
关于原型继承
所有 JavaScript 对象都从原型继承属性和方法。
日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自 Person.prototype。
Object.prototype 位于原型继承链的顶端:
日期对象、数组对象和 Person 对象都继承自 Object.prototype。
prototype属性,允许在构造器之外添加属性和方法
ObjectConstructor.prototype.newProperty = xxx
ES5 对象的新方法
属性相关
// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)
// descriptor: {value: 值}
// 或者设置访问权限,见下文
// 设置set/get: {set/get: 方法}
// 添加或更改多个对象属性
Object.defineProperties(object, descriptors)
// 访问属性
Object.getOwnPropertyDescriptor(object, property)
// 以数组返回所有属性
Object.getOwnPropertyNames(object)
// 以数组返回所有可枚举的属性
Object.keys(object)
ES5可以操作的descriptor
writable : true/false // 属性值可否修改
enumerable : true/false // 属性可否枚举
configurable : true/false // 属性可否重新配置
// 创建对象:
var person = {
firstName: "Bill",
lastName : "Gates",
language : "EN"
}
// 更改属性:
Object.defineProperty(person, "language", {enumerable:false});
//Object.keys(person) => [firstName,lastName]
操作原型相关
// 访问原型
Object.getPrototypeOf(object)
// 阻止向对象添加属性
Object.preventExtensions(object)
// 如果可将属性添加到对象,则返回 true
Object.isExtensible(object)
密封
// 防止更改对象属性(而不是值)
Object.seal(object)
// 如果对象被密封,则返回 true
Object.isSealed(object)
冻结
// 防止对对象进行任何更改
Object.freeze(object)
// 如果对象被冻结,则返回 true
Object.isFrozen(object)
Functions 全局对象
Events 事件
Browser 对象
HTML DOM 对象
内容会不断更新,欢迎批评指正。
分类:
# JavaScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!