JS 对象

W3C

原始类型通过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 对象

posted @   海胆Sur  阅读(3)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示