今天完成的事情:学习了js的this 关键字
明天计划的事情:继续学习js的后续内容
遇到的问题:内感到有些晦涩,需要加强练习
收获:首先学习了this 关键字
this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。例如
<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>
运行结果

在对象方法中, this 指向调用它所在方法的对象。
比如刚刚就是this 表示 person 对象。
如果单独使用 this,则它指向全局(Global)对象。
在浏览器中,window 就是该全局对象为 [object Window],如
<h2>JavaScript <b>this</b> 关键字</h2>
<p>实例中,<b>this</b> 指向了 window 对象:</p>
<p id="demo"></p>
<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>
运行结果

也可以在函数中使用 this(默认),如
<h2>JavaScript <b>this</b> 关键字</h2>
<p>实例中,<b>this</b> 表示 myFunction 函数的所有者:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
</script>
运行结果

在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素:如
<h2>JavaScript <b>this</b> 关键字</h2>
<button onclick="this.style.display='none'">点我后我就消失了</button>
运行结果

点击

也可以在对象方法中绑定,如
<h2>JavaScript <b>this</b> 关键字</h2>
<p>在实例中,<b>this</b> 指向了 fullName 方法所属的对象 person。</p>
<p id="demo"></p>
<script>
// 创建一个对象
var person = {
firstName: "John",
lastName: "Doe",
id: 5566,
myFunction: function () {
return this;
}
};
// 显示表单数据
document.getElementById("demo").innerHTML = person.myFunction();
</script>
运行结果

在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法。这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象。比如
<h2>JavaScript this 关键字</h2>
<p>实例中 <strong>this</strong> 指向了 person2,即便它是 person1 的方法:</p>
<p id="demo"></p>
<script>
var person1 = {
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName: "John",
lastName: "Doe",
}
var x = person1.fullName.call(person2);
document.getElementById("demo").innerHTML = x;
</script>
运行结果

还学习了let 和 const
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量,一旦声明,常量的值就不能改变。
全局变量
在函数外声明的变量作用域是全局的:例如
<p>全局变量在任何脚本和函数内均可访问。</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
myFunction();
function myFunction() {
document.getElementById("demo").innerHTML =
"我可以显示 " + carName;
}
</script>
运行结果

局部变量
在函数内声明的变量作用域是局部的(函数内):例如
<p>局部变量在声明的函数外不可以访问。</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML = "carName 的类型是:" + typeof carName;
function myFunction() {
var carName = "Volvo";
}
</script>
运行结果

重新定义变量
使用 var 关键字重新声明变量可能会带来问题。
在块中重新声明变量也会重新声明块外的变量:比如
<h2>使用 var 声明变量</h2>
<p id="demo"></p>
<script>
var x = 10;
// 这里输出 x 为 10
{
var x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 2
document.getElementById("demo").innerHTML = x;
</script>
运行结果

let 关键字就可以解决这个问题,因为它只在 let 命令所在的代码块 {} 内有效。
实测
<h2>使用 let 声明变量</h2>
<p id="demo"></p>
<script>
var x = 10;
// 这里输出 x 为 10
{
let x = 2;
// 这里输出 x 为 2
}
// 这里输出 x 为 10
document.getElementById("demo").innerHTML = x;
</script>
运行结果

const 关键字
const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改:
<h2>JavaScript const</h2>
<p>const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改。</p>
<p id="demo"></p>
<script>
try {
const PI = 3.141592653589793;
PI = 3.14;
}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
运行结果

const定义常量与使用let 定义的变量相似:
1.二者都是块级作用域
2.都不能和它所在作用域内的其他变量或函数拥有相同的名称
两者还有以下两点区别:
1.const声明的常量必须初始化,而let声明的变量不用
2.const 定义常量的值不能通过再赋值修改,也不能再次声明。而 let 定义的变量值可以修改。
关于这一块的内容很多还没有理解透彻,明天继续看看
评论