js对象 学习笔记（2）

JavaScript学习 本文总阅读量次

JavaScript 对象访问器（Getter 和 Setter）

Getter 和 Setter与函数相比的优点：

  • 它提供了更简洁的语法（Getter 和 Setter使用属性形式访问对象方法，不用加括号）
  • 它允许属性和方法的语法相同
  • 它可以确保更好的数据质量
  • 有利于后台工作

Getter（get 关键词）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
<p>Getter 和 Setter 允许您通过方法获取和设置属性。</p>

<p>此示例使用 lang 属性来获取语言属性的值。</p>

<p id="demo"></p>

<script>
// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language;
  }
};
// 使用 getter 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;
</script>

</body>

完整例子

Setter（set 关键词）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};

// 使用 setter 来设置对象属性：
person.lang = "en";

// 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.language;

完整例子

JavaScript 函数与 Getter的访问方法不同

例子1使用函数：

1
2
3
4
5
6
7
8
9
10
var person = {
  firstName: "Bill",
  lastName : "Gates",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// 使用方法来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName();

例子2使用Getter：

1
2
3
4
5
6
7
8
9
10
var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// 使用 getter 来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.fullName;

总结：

  • 例子 1 以函数形式访问 fullName：person.fullName()。
  • 例子 2 以属性形式访问 fullName：person.fullName。
  • 第二个例子提供了更简洁的语法。

JavaScript 对象构造器

总结

  1. 用大写首字母对构造器函数命名是个好习惯。

    1
    2
    3
    4
    5
    6
    function Person(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }

  2. 给已有对象添加属性：

    1
    对象名.新属性名="新属性值"

  3. 给已有对象添加新方法:

    1
    对象名.新方法名=function(){函数内容}

  4. 给构造器添加新属性:

  • 方法1：回到构造器函数中进行增加。
  • 方法2：构造器名.prototype.新属性名="新属性值"
  1. 给构造器添加新方法：
  • 方法1：回到构造器函数中进行增加。
  • 方法2：构造器名.prototype.新方法名=function(){函数内容}

对象类型（蓝图）（类）

  • 在上面的例子中，函数 Person() 就是对象构造器函数。
  • 通过 new 关键词调用构造器函数可以创建相同类型的对象：
    1
    2
    var myFather = new Person("Bill", "Gates", 62, "blue");
    var myMother = new Person("Steve", "Jobs", 56, "green");
    完整例子

this 关键词

  • 在 JavaScript 中，被称为 this 的事物是代码的“拥有者”。
  • this 的值，在对象中使用时，就是对象本身。
  • 在构造器函数中，this 是没有值的。它是新对象的替代物。 当一个新对象被创建时，this 的值会成为这个新对象。
  • 请注意 this 并不是变量。它是关键词。您无法改变 this 的值。

为(已有)对象添加属性

新属性被添加到 myFather。不是 myMother，也不是任何其他 person 对象。

1
myFather.nationality = "English";

为(已有)对象添加方法

新方法被添加到 myFather。不是 myMother，也不是任何其他 person 对象。

1
2
3
myFather.name = function () {
    return this.firstName + " " + this.lastName;
};

为构造器添加属性

  • 为(已有)对象添加新属性与新方法都很简单，但与他们不同，为对象构造器添加新属性必须添加到构造器函数内（错误示范：像Person.nationality = "English";这样会undefined）
    1
    2
    3
    4
    5
    6
    7
    function Person(first, last, age, eyecolor) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eyecolor;
        this.nationality = "English";
    }
  • 这样对象属性就可以拥有默认值。
  • 完整例子

为构造器添加方法

  • 同样无法为对象构造器添加新方法，必须在构造器函数内部向一个对象添加方法：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <p id="demo"></p>

    <script>
    // Person 对象的构造器函数
    function Person(firstName,lastName,age,eyeColor) {
      this.firstName = firstName;
      this.lastName = lastName;
      this.age = age;
      this.eyeColor = eyeColor;
      //在构造器函数内部向一个对象添加方法
      this.changeName = function (name) {
      //changeName() 函数把 name 赋值给 person 的 lastName 属性
        this.lastName = name;
      }
    }
    // 创建 Person 对象
    var myFriend = new Person("Bill","Gates",62,"green");

    // 修改姓氏
    myFriend.changeName("Jobs");

    // 显示姓氏
    document.getElementById("demo").innerHTML =
    "My friend's last name is " + myFriend.lastName;
    </script>

    完整例子

内建 JavaScript 构造器

Math() 对象不算，Math 是全局对象。new 关键词不可用于 Math。

1
2
3
4
5
6
7
8
var x1 = {};            // 新对象
var x2 = "";            // 新的原始字符串
var x3 = 0;             // 新的原始数值
var x4 = false;         // 新的原始逻辑值
var x5 = [];            // 新的数组对象
var x6 = /()/           // 新的正则表达式对象
var x7 = function(){};  // 新的函数对象
var x8 = new Date();      // 一个新的 Date 对象

完整例子

JavaScript 对象原型

所有 JavaScript 对象都从原型继承属性和方法。

原型继承

  • 日期对象继承自 Date.prototype。
  • 数组对象继承自 Array.prototype。
  • Person 对象继承自 Person.prototype。
  • Object.prototype 位于原型继承链的顶端：日期对象、数组对象和 Person 对象都继承自 Object.prototype。

使用 prototype 属性为对象构造器添加新属性/方法

注意：请只修改自己的原型。绝不要修改标准 JavaScript 对象的原型。

  • 为对象构造器添加新属性：
    1
    2
    3
    4
    5
    6
    7
    function Person(first, last, age, eyecolor) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eyecolor;
    }
    Person.prototype.nationality = "English";
    完整例子
  • 为对象构造器添加新方法：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function Person(first, last, age, eyecolor) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eyecolor;
    }
    Person.prototype.name = function() {
        return this.firstName + " " + this.lastName;
    };
    完整例子
JavaScript学习