目录
扫描二维码关注公众号，回复：
13118657 查看本文章
4.1. JavaScript Getter（get 关键词）
4.2. JavaScript Setter（set 关键词）
5.1C.prototype 属性允许您为对象构造器添加新属性：
5.2C.prototype 属性也允许您为对象构造器添加新方法：
五、对象-1
1.对象定义
在 JavaScript 中，几乎“所有事物”都是对象：
布尔是对象（如果用 new 关键词定义）
数字是对象（如果用 new 关键词定义）
字符串是对象（如果用 new 关键词定义）
日期永远都是对象
算术永远都是对象
正则表达式永远都是对象
数组永远都是对象
函数永远都是对象
对象永远都是对象
-
JavaScript 原始值
所有 JavaScript 值，除了原始值，都是对象。原始值指的是没有属性或方法的值。
原始数据类型指的是拥有原始值的数据。
JavaScript 定义了 5 种原始数据类型：
string
number
boolean
null
undefined原始值是一成不变的（它们是硬编码的，因此不能改变）。
假设 x = 3.14，您能够改变 x 的值。但是您无法改变 3.14 的值。
1.1.使用对象字面量
对象也是变量。但是对象能够包含很多值。
<p id="demo"></p>
<script>
var person = {
firstName : "Bill",
lastName : "Gates",
age : 62,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>执行结果： Bill 已经 62 岁了。
使用 JavaScript 关键词 new ：
<p id="demo"></p>
<script>
var person = new Object();
person.firstName = "Bill";
person.lastName = "Gates";
person.age = 50;
person.eyeColor = "blue";
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>执行结果： Bill 已经 50 岁了。
1.2.使用 Object 生成布尔对象：
<script>
var person = new Object();
person.firstname="Cathy";
person.lastname="Doe";
person.age=20;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</script>执行结果：Cathy is 20 years old.
1.3.使用对象字面量来创建对象
<script>
person={firstname:"Cathy",lastname:"Doe",age:20,eyecolor:"blue"}
document.write(person.firstname + " is " + person.age + " years old.");
</script>
执行结果：Cathy is 20 years old.
1.4.使用函数来构造对象
<script>
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("Cathy","Doe",20,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>
执行结果：Cathy is 20 years old.
1.5.JavaScript 对象是易变的
对象是易变的：它们通过引用来寻址，而非值。
如果 person 是一个对象，下面的语句不会创建 person 的副本：
var x = person; // 这不会创建 person 的副本。对象 x 并非 person 的副本。它就是 person。x 和 person 是同一个对象。
对 x 的任何改变都将改变 person，因为 x 和 person 是相同的对象。
<p>对对象副本的任何更改也将更改原始对象。</p>
<p id="demo"></p>
<script>
var person = {
firstName : "Bill",
lastName : "Gates",
age : 62,
eyeColor : "blue"
}
var x = person;
x.age = 10; // 这将同时改变 both x.age 和 person.age
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>2.对象属性
属性指的是与 JavaScript 对象相关的值。
JavaScript 对象是无序属性的集合。
属性通常可以被修改、添加和删除，但是某些属性是只读的。
访问对象属性的语法是：
objectName.property // person.age或者：
objectName["property"] // person["age"]或者：
objectName[expression] // x = "age"; person[x]2.1. for...in 循环
<p id="demo"></p>
<script>
var txt = "";
var person = {fname: "sam", lname: "zhang", age: 24};
var x;
for (x in person) {
txt += person[x] + " ";
}
document.getElementById("demo").innerHTML = txt;
</script>执行结果： sam zhang 24
2.2.添加新属性
<p id="demo"></p>
<script>
var person = {
firstname : "sam",
lastname : "zhang",
age : 24,
eyecolor : "blue"
};
person.nationality = "China";
document.getElementById("demo").innerHTML =
person.firstname + " is " + person.nationality + ".";
</script>执行结果： sam is China.
2.3. delete 关键词从对象中删除属性：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
delete person.age; // 或 delete person["age"];3.对象方法
向对象添加方法是在构造器函数内部完成的：
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var person = {
firstName : "sam",
lastName : "sxj",
id : 325,
};
person.name = function() {
return this.firstName + " " + this.lastName;
};
document.getElementById("demo").innerHTML =
"My friend is " + person.name();
</script>
</body>
</html>
执行结果： My friend is sam sxj
4.对象访问器
JavaScript 访问器（Getter 和 Setter）
ECMAScript 5 (2009) 引入了 Getter 和 Setter。
Getter 和 Setter 允许您定义对象访问器（被计算的属性）
4.1. JavaScript Getter（get 关键词）
Getter 和 Setter 允许您通过方法获取和设置属性。
本例使用 lang 属性来获取 language 属性的值。
<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName: "sam",
lastName : "sxj",
language : "en",
get lang() {
return this.language;
}
};
// 使用 getter 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;
</script>
执行结果： en
4.2. JavaScript Setter（set 关键词）
本例使用 lang 属性来设置 language 属性的值。
<p id="demo"></p>
<script>
// Create an object:
var person = {
firstName: "sam",
lastName : "sxj",
language : "en",
set lang(value) {
this.language = value;
}
};
// 使用 set 设置属性：
person.lang = "zh";
// 显示对象的数据：
document.getElementById("demo").innerHTML = person.language;
</script>执行结果： zh
4.3.JavaScript 函数还是 Getter？
例子 1 以函数形式访问 fullName：person.fullName()。
var person = {
firstName: "Bill",
lastName : "Gates",
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// 使用方法来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName();返回结果： Bill Gates
例子 2 以属性形式访问 fullName：person.fullName。
var person = {
firstName: "Bill",
lastName : "Gates",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
// 使用 getter 来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName;返回结果： Bill Gates
4.4.数据质量
使用 getter 和 setter 时，JavaScript 可以确保更好的数据质量。
使用 lang 属性以大写形式返回 language 属性的值：
<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName: "sam",
lastName : "sxj",
language : "en",
get lang() {
return this.language.toUpperCase();
}
};
// 使用 getter 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;
</script>
返回结果： EN
使用 lang 属性将大写值存储在 language 属性中：
var person = {
firstName: "Bill",
lastName : "Gates",
language : "",
set lang(lang) {
this.language = lang.toUpperCase();
}
};
// 使用 getter 来设置对象属性：
person.lang = "en";
// 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.language;返回结果： EN
4.5.为什么使用 Getter 和 Setter？
它提供了更简洁的语法
它允许属性和方法的语法相同
它可以确保更好的数据质量
有利于后台工作
4.6.一个计数器实例
<p id="demo"></p>
<script>
var obj = {
counter : 0,
get reset() {
this.counter = 0;
},
get increment() {
this.counter++;
},
get decrement() {
this.counter--;
},
set add(value) {
this.counter += value;
},
set subtract(value) {
this.counter -= value;
}
};
// 操作计数器：
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
// 显示计数器：
document.getElementById("demo").innerHTML = obj.counter;
</script>
执行结果： 4
Object.defineProperty() 方法也可用于添加 Getter 和 Setter：
<p id="demo"></p>
<script>
// 定义对象
var obj = {counter : 0};
// 定义 setters
Object.defineProperty(obj, "reset", {
get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
set : function (value) {this.counter -= value;}
});
// 操作计数器：
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
// 显示计数器：
document.getElementById("demo").innerHTML = obj.counter;
</script>执行结果： 4
5.对象构造器
5.1.对象类型(蓝图)(类)
前一章的实例是有限制的，他们只创建单一对象，有时我们需要创建相同“类型”的许多对象的“蓝图”。
创建一种“对象类型”的方法，是使用对象构造器函数。在上面的例子中，函数Person()就是对象构造器函数。
通过new关键词调用构造器函数可以创建相同类型的对象：
<p id="demo"></p>
<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// 创建 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
var myBrother = new Person("Steve", "Jobs", 56, "green");
// 显示年龄
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.age + ". My brother is " + myBrother.age + ".";
</script>
执行结果：My friend is 62. My brother is 56.
-
this 关键词
在 JavaScript 中，被称为 this 的事物是代码的“拥有者”。
this 的值，在对象中使用时，就是对象本身。
在构造器函数中，this 是没有值的。它是新对象的替代物。 当一个新对象被创建时，this 的值会成为这个新对象。
请注意 this 并不是变量。它是关键词。您无法改变 this 的值。
5.1A.为对象添加属性
<p id="demo"></p>
<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// 创建两个 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
var myBrother = new Person("Steve", "Jobs", 56, "green");
// 为第一个对象添加国籍
myFriend.nationality = "English";
// 显示国籍
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.nationality;
</script>执行结果： My friend is English
5.1B.为构造器添加属性
<p id="demo"></p>
<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.nationality = "English";
}
// 创建两个 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
var myBrother = new Person("Steve", "Jobs", 56, "green");
// 显示国籍
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.nationality + ". My brother is " + myBrother.nationality;
</script>执行结果： My friend is English. My brother is English
5.1C.prototype 属性允许您为对象构造器添加新属性：
<p id="demo"></p>
<script>
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Person.prototype.nationality = "English";
var myFriend = new Person("Bill", "Gates", 62, "blue");
document.getElementById("demo").innerHTML =
"The nationality of my friend is " + myFriend.nationality;
</script>执行结果： The nationality of my friend is English
5.2A.为对象添加方法
<p id="demo"></p>
<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// 创建两个 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
var myBrother = new Person("Steve", "Jobs", 56, "green");
// 向第一个对象添加 name 方法
myFriend.name = function() {
return this.firstName + " " + this.lastName;
};
// 显示全名
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.name();
</script>执行结果： My friend is Bill Gates
5.2B.为构造器添加方法
<p id="demo"></p>
<script>
// Person 对象的构造器函数
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.name = function() {
return this.firstName + " " + this.lastName
};
}
// 创建 Person 对象
var myFriend = new Person("Bill", "Gates", 62, "blue");
// 显示全名
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.name();
</script>
执行结果： My friend is Bill Gates
5.2C.prototype 属性也允许您为对象构造器添加新方法：
<p id="demo"></p>
<script>
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Person.prototype.name = function() {
return this.firstName + " " + this.lastName
};
var myFriend = new Person("Bill", "Gates", 62, "blue");
document.getElementById("demo").innerHTML =
"My friend is " + myFriend.name();
</script>执行结果： My friend is Bill Gates
5.3.内建 JavaScript 构造器
JavaScript 提供用于原始对象的构造器：
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p id="demo"></p>
<script>
var x1 = new Object(); //object 新的 Object 对象
var x2 = new String(); //Object 新的 String 对象
var x3 = new Number(); //Object 新的 Number 对象
var x4 = new Boolean(); //Object 新的 Boolean 对象
var x5 = new Array(); //Object 新的 Array 对象
var x6 = new RegExp(); //Object 新的 RegExp 对象
var x7 = new Function(); //Function 新的 Function 对象
var x8 = new Date(); //Object 新的 Date 对象
// 显示所有对象的类型
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>" +
"x8: " + typeof x8 + "<br>";
</script>
<p>没有必要使用 String()、Number()、Boolean()、Array() 以及 RegExp()。</p>
</body>
</html>
Math() 对象不再此列。Math 是全局对象。new 关键词不可用于 Math。
JavaScript 提供原始数据类型字符串、数字和布尔的对象版本。但是并无理由创建复杂的对象。原始值快得多！
请使用对象字面量 {} 代替 new Object()。
请使用字符串字面量 "" 代替 new String()。
请使用数值字面量代替 Number()。
请使用布尔字面量代替 new Boolean()。
请使用数组字面量 [] 代替 new Array()。
请使用模式字面量代替 new RexExp()。
请使用函数表达式 () {} 代替 new Function()。
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<p id="demo"></p>
<script>
var x1 = {}; // 对象
var x2 = ""; // 字符串
var x3 = 0; // 数字
var x4 = false; // 布尔
var x5 = []; // 对象（非数组）
var x6 = /()/; // 对象
var x7 = function(){}; // 函数
// 显示所有类型
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>
</body>
</html>6. ES5 对象方法
ECMAScript 5 为 JavaScript 添加了大量新的对象方法。
ES5 新的对象方法
// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)
// 添加或更改多个对象属性
Object.defineProperties(object, descriptors)
// 访问属性
Object.getOwnPropertyDescriptor(object, property)
// 以数组返回所有属性
Object.getOwnPropertyNames(object)
// 以数组返回所有可枚举的属性
Object.keys(object)
// 访问原型
Object.getPrototypeOf(object)
// 阻止向对象添加属性
Object.preventExtensions(object)
// 如果可将属性添加到对象，则返回 true
Object.isExtensible(object)
// 防止更改对象属性（而不是值）
Object.seal(object)
// 如果对象被密封，则返回 true
Object.isSealed(object)
// 防止对对象进行任何更改
Object.freeze(object)
// 如果对象被冻结，则返回 true
Object.isFrozen(object)
6.1.更改属性值
语法:
Object.defineProperty(object, property, {value : value})<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName: "Bill",
lastName : "Gates",
language : "EN"
};
// 更改属性：
Object.defineProperty(person, "language", {value:"ZH"})
document.getElementById("demo").innerHTML = person.language;
</script>执行结果： ZH
6.2.更改元数据
ES5 允许更改以下属性元数据：
writable : true // 属性值可修改
enumerable : true // 属性可枚举
configurable : true // 属性可重新配置
writable : false // 属性值不可修改
enumerable : false // 属性不可枚举
configurable : false // 属性不可重新配置
ES5 允许更改 getter 和 setter：
// 定义 getter
get: function() { return language }
// 定义 setter
set: function(value) { language = value }
此例使语言为只读：
Object.defineProperty(person, "language", {writable:false});此例使语言不可枚举：
Object.defineProperty(person, "language", {enumerable:false});6.3. 列出对象的所有属性：
Object.defineProperty(object, property, descriptor)<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName: "Bill",
lastName : "Gates",
language : "EN"
}
// 更改属性：
Object.defineProperty(person, "language", {enumerable:false});
// 显示属性：
document.getElementById("demo").innerHTML = Object.getOwnPropertyNames(person);
</script>执行结果： firstName,lastName,language
6.4. 只列出对象的所有可枚举属性：
Object.defineProperty(object, property, descriptor)<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName: "Bill",
lastName : "Gates",
language : "EN"
}
// 更改属性：使 language 不可枚举：
Object.defineProperty(person, "language", {enumerable:false});
// 显示属性：
document.getElementById("demo").innerHTML = Object.keys(person);
</script>执行结果： firstName,lastName
6.5.向对象添加新属性：
Object.defineProperty(object, property, descriptor)<p id="demo"></p>
<script>
// 创建对象：
var person = {
firstName: "Bill",
lastName : "Gates",
language : "EN"
};
// 添加属性：
Object.defineProperty(person, "year", { value:"2019" })
document.getElementById( "demo" ).innerHTML = person.year;
</script>执行结果： 2019
6.6.添加 Getter 和 Setter ，
Object.defineProperty(object, property, descriptor)<p id="demo"></p>
<script>
// 创建对象
var person = {firstName:"Bill", lastName:"Gates"};
// 定义 getter
Object.defineProperty(person, "fullName", {
get : function () {return this.firstName + " " + this.lastName;}
});
// 显示全名：
document.getElementById("demo").innerHTML = person.fullName;
</script>执行结果： Bill Gates
6.7.一个计数器实例
<p id="demo"></p>
<script>
// 定义对象
var obj = {counter:0};
// 定义 setters
Object.defineProperty(obj, "reset", {
get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
set : function (i) {this.counter -= i;}
});
// 操作计数器：
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
document.getElementById("demo").innerHTML = obj.counter;
</script>执行结果： 4