JavaScript 方法


目录

    显示目录


例子

const person = {
    firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + 
this.lastName;
  }
};

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

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

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

是什么?

在 JavaScript 中,this 关键字指的是一个对象

哪个对象取决于this如何被调用(使用或调用)。

this 关键字根据其使用方式引用不同的对象:

  • 在对象方法中,this 引用对象

  • 单独而言,this 指的是全局对象

  • 在函数中,this 指的是全局对象

  • 在函数中,在严格模式下,this未定义

  • 在事件中,this 指的是接收事件的元素

  • call()apply()bind 等方法() 可以将 this 引用到任何对象

笔记

this 不是变量。这是一个关键字。您无法更改的值

也可以看看:

JavaScript this 教程


JavaScript 方法

JavaScript 方法是可以对对象执行的操作。

JavaScript 方法是包含函数的属性 定义。

firstName

约翰

lastName

美国能源部

age

50

eyeColor

蓝色的

fullName

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

方法是存储为对象属性的函数。


访问对象方法

您可以使用以下语法访问对象方法:

objectName.methodName()

您通常会将 fullName() 描述为 person 对象的方法,并且 fullName 作为属性。

当使用() 调用时,fullName 属性将(作为函数)执行。

此示例访问 person 对象的 fullName() 方法

例子

name = person.fullName();

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating and using an object method.</p>
<p>A method is actually a function definition stored as a property value.</p>

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

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>

如果您访问 fullName 属性,不带(),则 将返回函数定义

例子

name = person.fullName;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>An object method is a function definition stored as a property value.</p>
<p>If you access it without (), it will return the function definition:</p>

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

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>


向对象添加方法

向对象添加新方法很容易:

例子

 person.name = function () {
  return this.firstName + " " + this.lastName;
};

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
};
person.name = function() {
  return this.firstName + " " + this.lastName;
};

document.getElementById("demo").innerHTML =
"My father is " + person.name(); 
</script>

</body>
</html>

使用内置方法

此示例使用 String 对象的 toUpperCase() 方法来转换文本 转为大写:

let message = "Hello world!";
let x = message.toUpperCase();

执行上述代码后 x 的值将是:

HELLO WORLD!

例子

person.name = function () {
  return (this.firstName + " " + this.lastName).toUpperCase();
};

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
};
person.name = function() {
  return (this.firstName + " " + this.lastName).toUpperCase();
};

document.getElementById("demo").innerHTML =
"My father is " + person.name(); 
</script>

</body>
</html>