首页 > web前端技术 > javascript > JavaScript对象访问器、对象构造器

JavaScript对象访问器、对象构造器

一、JavaScript对象访问器
 
JavaScript访问器(Getter和Setter),ECMAScript 5 (2009)引入了Getter和Setter。Getter和Setter允许您定义对象访问器(被计算的属性)。使用Getter和Setter,可以提供了更简洁的语法、允许属性和方法的语法相同、确保更好的数据质量、有利于后台工作。
1.JavaScript Getter(get 关键词)
使用lang属性来获取language属性的值。
// 创建对象:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language;
  }
};
// 使用 getter 来显示来自对象的数据:
document.getElementById("demo").innerHTML = person.lang;
 
2.JavaScript Setter(set 关键词)
使用 lang 属性来设置 language 属性的值。
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};
// 使用 setter 来设置对象属性:
person.lang = "en";
// 显示来自对象的数据:
document.getElementById("demo").innerHTML = person.language;
 
二、JavaScript对象构造器
 
1.对象类型(蓝图)(类)
前面实例是有限制的。它们只创建单一对象。有时我们需要创建相同“类型”的许多对象的“蓝图”。创建一种“对象类型”的方法,是使用对象构造器函数。通过new关键词调用构造器函数可以创建相同类型的对象:
function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}
var myFather = new Person("Bill", "Gates", 62, "blue");
var myMother = new Person("Steve", "Jobs", 56, "green");
 
2.this关键词
在JavaScript中,被称为this的事物是代码的“拥有者”。this的值,在对象中使用时,就是对象本身。在构造器函数中,this是没有值的。它是新对象的替代物。 当一个新对象被创建时,this的值会成为这个新对象。请注意this并不是变量。它是关键词。您无法改变this的值。
 
3.为对象添加属性
为已有的对象添加新属性很简单:myFather.nationality = "English";
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<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>
</body>
</html>
新属性被添加到myFather。不是myMother,也不是任何其他person对象。
 
4.为对象添加方法
为已有的对象添加新方法很简单:
myFather.name = function () {
    return this.firstName + " " + this.lastName;
};
例如:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象构造器</h1>
<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>
</body>
</html>
新方法被添加到myFather。不是myMother,也不是任何其他person对象。
 
5.为构造器添加属性
如需向构造器添加一个新属性,必须添加到构造器函数:
function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.nationality = "English";
}
这样对象属性就可以拥有默认值。
 
6.为构造器添加方法
必须在构造器函数内部向一个对象添加方法:
function Person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;  
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
        this.lastName = name;
    };
}
changeName()函数把name赋值给person的lastName属性。
通过用myMother替代this,JavaScript可以获知目前处理的哪个person。
 
7.内建JavaScript构造器
JavaScript提供用于原始对象的构造器:
var x1 = new Object();    // 一个新的 Object 对象
var x2 = new String();    // 一个新的 String 对象
var x3 = new Number();    // 一个新的 Number 对象
var x4 = new Boolean();   // 一个新的 Boolean 对象
var x5 = new Array();     // 一个新的 Array 对象
var x6 = new RegExp();    // 一个新的 RegExp 对象
var x7 = new Function();  // 一个新的 Function 对象
var x8 = new Date();      // 一个新的 Date 对象
Math() 对象不再此列。Math 是全局对象。new 关键词不可用于 Math。
正如以上所见,JavaScript提供原始数据类型字符串、数字和布尔的对象版本。但是并无理由创建复杂的对象。原始值快得多!
请使用对象字面量 {} 代替 new Object()。
请使用字符串字面量 "" 代替 new String()。
请使用数值字面量代替 Number()。
请使用布尔字面量代替 new Boolean()。
请使用数组字面量 [] 代替 new Array()。
请使用模式字面量代替 new RexExp()。
请使用函数表达式 () {} 代替 new Function()。
例如:
var x1 = {};            // 新对象
var x2 = "";            // 新的原始字符串
var x3 = 0;             // 新的原始数值
var x4 = false;         // 新的原始逻辑值
var x5 = [];            // 新的数组对象
var x6 = /()/           // 新的正则表达式对象
var x7 = function(){};  // 新的函数对象
通常,字符串被创建为原始值:var firstName = "John";但是也可以使用new关键词创建字符串对象:var firstName = new String("John")
数值被创建为原始值:var x = 456;但是也可以使用 new 关键词创建数字对象:var x = new Number(456)
逻辑值被创建为原始值:var x = false;但是也可以使用 new 关键词创建逻辑对象:var x = new Boolean(false)。