第六节JavaScript this、let、const关键字

一、JavaScript this关键字

1、描述

面向对象语言中，this表示当前对象的一个引用。

但在JavaScript中，this不是固定不变的，它会随着执行环境的改变而变化。

方法中，this表示该方法所属的对象。
如果单独使用，this表示全局对象。
在函数中，this表示全局对象。
在函数中，在严格模式下，this是未定义的（undefinded）。
在事件中，this表示接收事件的元素。
类似call()和apply()方法，可以将this引用到任何对象。

2、this使用

1）、方法中的this

在对象方法中，this指向调用它所在方法的对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript基础学习</title>
	</head>
	<body>
		<h2>JavaScript <b>this</b> 关键字</h2>
		<p>实例中，<b>this</b> 指向了 <b>person</b> 对象。</p>
		<p>因为 person 对象是 fullName 方法的所有者。</p>
		<p id="demo"></p>
		<script>
			// 创建一个对象
			var person = {
				firstName: "John",
				lastName: "Doe",
				id: 5566,
				fullName: function() {
					return this.firstName + " " + this.lastName;
				}
			};

			// 显示对象的数据
			document.getElementById("demo").innerHTML = person.fullName();
		</script>

	</body>
</html>

运行结果：

在上述实例中，this表示person对象。

fullName方法所属的对象就是person。

2）、单独使用this

单独使用this，则它指向全局对象。

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

输出结果：[object Window]

"use strict";

var x = this;

在严格模式下，如果单独使用，this也是指向全局对象。

3）、函数中使用this（默认）

在函数中，函数的所属者默认绑定到this上。

<script>
document.getElementById("demo").innerHTML=
myFunction();
function myFunction() {
  return this;
}
</script>

输出结果：[object Window]

在浏览器中，Window就是该全局对象为【object Window】。

4）、函数中使用this（严格模式）

严格模式下函数是没有绑定到this上，这时候this是undefined。

<script>
"use strict";
document.getElementById("demo").innerHTML= myFunction();
function myFunction() {
  return this;
}
</script>

输出结果：undefined

5）、事件中使用this

在HTML事件语句中，this指向了接收事件的HTML元素：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript基础学习</title>
	</head>
	<body>
		<h2>JavaScript <b>this</b> 关键字</h2>
		<button onclick="this.style.display='none'">点我后我就消失了</button>
	</body>
</html>

输出结果：

点击“点我后我就消失了”的按钮后，该button消失。

6）、对象方法中绑定this

下面实例中，this 是 person 对象，person 对象是函数的所有者：

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

下面这个实例说明： this.firstName 表示 this (person) 对象的 firstName 属性。

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

7）、显示函数绑定

在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法.

二、JavaScript let、const关键字

1、描述

let 声明的变量只能在let命令所在的代码块内有效。

const 声明一个只读的变量，一旦声明，常量的值就不能改变。

在ES6之前，JavaScript只有两种作用域：全局变量和函数内的局部变量。

2、let

全部变量：

在函数外声明的变量作用域是全局的