JavaScript练习笔记(4)

目录

五、对象-1 

1.对象定义

1.1.使用对象字面量

1.2.使用 Object 生成布尔对象：

1.3.使用对象字面量来创建对象

1.4.使用函数来构造对象

1.5.JavaScript 对象是易变的

2.对象属性

2.1. for...in 循环

2.2.添加新属性

2.3. delete 关键词从对象中删除属性：

3.对象方法

4.对象访问器

4.1. JavaScript Getter（get 关键词）

4.2. JavaScript Setter（set 关键词）

4.3.JavaScript 函数还是 Getter？

4.4.数据质量

4.5.为什么使用 Getter 和 Setter？

4.6.一个计数器实例

5.对象构造器

5.1.对象类型(蓝图)(类)

5.1A.为对象添加属性

5.1B.为构造器添加属性

5.1C.prototype 属性允许您为对象构造器添加新属性：

5.2A.为对象添加方法

5.2B.为构造器添加方法

5.2C.prototype 属性也允许您为对象构造器添加新方法：

5.3.内建 JavaScript 构造器

6. ES5 对象方法

6.1.更改属性值

6.2.更改元数据

6.3. 列出对象的所有属性：

6.4. 只列出对象的所有可枚举属性：

6.5.向对象添加新属性：

6.6.添加 Getter 和 Setter ， 

6.7.一个计数器实例

 

五、对象-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