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 不是变量。这是一个关键字。您无法更改this 的值。


方法中的 this

当在对象方法中使用时,this 指的是对象

在此页面顶部的示例中,this 引用 person 对象。

因为fullName方法是person对象的方法。

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>

这个单独

单独使用时,this 指的是全局对象

因为 this 是在全局范围内运行的。

在浏览器窗口中,全局对象是[object Window]

例子

let x = this; 

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the window object:</p>

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

<script>
let x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

严格模式下,单独使用时,this也指全局对象

例子

 "use strict";
let x = this; 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the window object:</p>
<p id="demo"></p>

<script>
"use strict";
let x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

函数中的 this (默认)

在函数中,全局对象this的默认绑定。

在浏览器窗口中,全局对象是[object Window]

例子

function myFunction() {
    return this;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the the window object:</p>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction();

function myFunction() {
  return this;
}
</script>

</body>
</html>


函数中的 this(严格)

JavaScript 严格模式不允许默认绑定。

因此,当在严格模式下在函数中使用时,this未定义

例子

"use strict";
function myFunction() {
    return this;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In a function, by default, <b>this</b> refers to the global object.</p>

<p>Strict mode does not allow default binding, so <b>this</b> is:</p>
<p id="demo"></p>

<script>
"use strict";
document.getElementById("demo").innerHTML = myFunction();

function myFunction() {
  return this;
}
</script>

</body>
</html>

事件处理程序中的 this

在 HTML 事件处理程序中,this 指的是接收到事件的 HTML 元素 事件:

例子

 <button onclick="this.style.display='none'">
  Click to 
  Remove Me!
</button>

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<button onclick="this.style.display='none'">Click to Remove Me!</button>

</body>
</html>

对象方法绑定

在这些示例中,thisperson 对象

例子

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

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the <b>person object</b>.</p>

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

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

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

</body>
</html>

例子

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>

this.firstNamethis(person 对象)的 firstName 属性。


显式函数绑定

call()apply() 方法是预定义的 JavaScript 方法。

它们都可以用于以另一个对象作为参数来调用对象方法。

也可以看看:

函数 call() 方法

函数 apply() 方法

函数bind()方法

下面的示例以 person2 作为参数调用 person1.fullName,this 指的是 person2, 即使 fullName 是 person1 的方法:

例子

const person1 = {
    fullName: function() {
      return this.firstName + " " + this.lastName;
    }
}

const person2 = {
    firstName:"John",
    lastName: "Doe",
}

// Return "John Doe":
person1.fullName.call(person2);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example <strong>this</strong> refers to person2, even if it is a method of person1:</p>

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

<script>
const person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const person2 = {
  firstName:"John",
  lastName: "Doe",
}

let x = person1.fullName.call(person2); 
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>



函数借用

通过 bind() 方法,一个对象可以借用另一个对象的方法。

此示例创建 2 个对象(人员和成员)。

成员对象借用了 person 对象的 fullname 方法:

例子

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

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Function bind()</h1>

<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p> 

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

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

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

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

</body>
</html>

优先级

确定 this 引用的是哪个对象;使用以下优先顺序。

Precedence

目的

1

绑定()

2

apply() 和 call()

3

对象方法

4

全球范围

this 是否在使用 bind() 调用的函数中?

this 是否在使用 apply() 调用的函数中?

this 是否在使用 call() 调用的函数中?

this 是对象函数(方法)吗? <p>this 是在全局范围内的函数中吗?