今天完成的事情：学习了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 定义的变量值可以修改。
关于这一块的内容很多还没有理解透彻，明天继续看看
返回列表
评论