JavaScript菜鸟教程

JavaScript 对象

JavaScript 函数

JS HTML DOM

JS 浏览器BOM

AJAX 菜鸟教程

JavaScript 参考手册

JavaScript 对象构造函数 JavaScript 对象属性

JavaScript 对象方法

方法是与对象，或者说相关联的函数，一种方法是一个对象，它是函数的一个属性。

方法的定义方式与常规函数的定义方式相同，不同之处在于必须将它们分配为对象的属性。

访问JavaScript方法

为了检索对象方法，您将以与调用常规函数相同的方式对其进行调用，只是将其附加到对象变量上。

示例

// 创建对象
var user = {
  firstName: "Seagull",
  lastName : "an",
  age  : 22,
  location : "New Delhi",
  getName  : function() {
 return this.firstName + " " + this.lastName;
  }
};

//访问getName()方法
user.getName();

测试看看‹/›

如果访问不带()括号的方法，它将返回函数定义：

示例

user.getName;

测试看看‹/›

使用this作为对象引用

JavaScript有一个特殊的关键字this，您可以在方法中使用它来引用当前对象。

您可能已经注意到我们的方法有些奇怪。以这个为例：

  getName: function() {
   return this.firstName + " " + this.lastName;
  }

this关键字是指代码被写入内部当前对象-所以在这种情况下，this等同于user。

换句话说，this.firstName表示此对象的firstName属性。

您可以在JS关键字教程JS中了解有关该this关键字的更多信息。

添加新方法

为了向对象添加新方法，您可以使用赋值运算符（=）将新函数分配给属性。

本示例向用户对象添加“ greet”方法：

示例

user.greet = function() {
    return "Hello World";
};

测试看看‹/›

Getters和Setters

ECMAScript 5(2009)引入了Getters和Setters。

getter是一种获取特定属性值的方法。

setter是一种设置特定属性值的方法。

您可以在支持添加新属性的任何预定义核心对象或用户定义对象上定义getter和setter。

JavaScript Getter（get关键字）

本示例使用get loc属性作为location属性的值：

示例

//创建一个对象
var user = {
  firstName: "Seagull",
  lastName : "Anna",
  age  : 22,
  location : "New Delhi",
  get loc() {
     return this.location;
  }
};

//显示来自对象的数据
document.getElementById("para").innerHTML = user.loc;

测试看看‹/›

JavaScript Setter（set关键字）

本示例使用set loc属性作为location属性的值：

示例

// 创建对象
var user = {
  firstName: "Seagull",
  lastName : "Anna",
  age  : 22,
  location : "New Delhi",
  set loc(x) {
     this.location = x;
  }
};

// 使用setter设置对象属性
user.loc = "Goa";

// 显示来自对象的数据
document.getElementById("para").innerHTML = user.location;

测试看看‹/›

Function 函数和 Getter 之间的区别？

以下两个示例显示了function 和 getter之间的区别：

示例1（使用功能）：

示例

//创建对象
var user = {
  firstName: "Seagull",
  lastName : "Anna",
  age  : 22,
  location : "New Delhi",
  fullName : function() {
      return this.firstName + " " + this.lastName;
  }
};

// 显示来自对象的数据
document.getElementById("para").innerHTML = user.fullName();

测试看看‹/›

示例2（使用Getter）：

示例

// 创建对象
var user = {
  firstName: "Seagull",
  lastName : "Anna",
  age  : 22,
  location : "New Delhi",
  get fullName() {
     return this.firstName + " " + this.lastName;
  }
};

//显示来自对象的数据
document.getElementById("para").innerHTML = user.fullName;

测试看看‹/›

示例1 将fullName作为函数访问：user.fullName()。

示例2 将fullName作为属性访问：user.fullName。

使用Getters 和 Setters：

它提供了更简单的语法
它允许属性和方法的语法相同
它可以确保更好的数据质量
对于后端处理很有用

Object.defineProperty()

Object.defineProperty()方法还可以用于添加Getter和Setter。

语法：

Object.defineProperty(object, property, {value : value})

让我们以“计数器”对象为例：

示例

var counter = {i : 0};

Object.defineProperty(counter, "increment", { 
   get: function() {this.i++;},
});

Object.defineProperty(counter, "decrement", { 
   get: function() {this.i--;},
});

Object.defineProperty(counter, "reset", { 
   get: function() {this.i = 0;},
});

Object.defineProperty(counter, "add", {
   set: function (value) {this.i += value;}
});

Object.defineProperty(counter, "subtract", {
   set: function (value) {this.i -= value;}
});

counter.reset;
counter.add = 25;
counter.increment;

测试看看‹/›

JavaScript 对象构造函数 JavaScript 对象属性

JavaScript菜鸟教程