全栈之路-前端javascript基础知识5

Posted 2022-01-21 涂宗勋

1、js函数中this的一些注意事项1，,js普通函数中的this并不固定指代某个对象，调用的时候才能确认，例如如下代码：

window.name="tzx";
function getName()
	console.log(this.name);


let user=
	name:"tzx123"

user.getName=getName;

this.getName();
getName();
window.getName();
user.getName();

上述代码调用指向的是同一个函数定义，但是输出结果如下：

tzx
tzx
tzx
tzx123

可以看到前三次调用结果一样，第四次调用结果不同。这是因为，在普通函数中，直接定义在script中的，等同于定义在内置对象window中，所以直接调用和用window调用，读到的都是window.name这个属性。而第四次的调用是进行了一个引用赋值，这时候this指向的是实际调用的所属对象，因此输出了不一样的值。

2、js箭头函数中this和普通函数中有所区别，不会因为调用地方不同而发生改变，只跟这个函数定义的位置有关，例如如下代码：

window.age=10;
let getAge=()=>
	console.log(this.age);


let user=
	age:20


user.getAge=getAge;
getAge();
user.getAge();
window.getAge();

上边代码输出结果如下：

10
10
Uncaught TypeError: window.getAge is not a function
    at test4.html:40

可以看到前两次不同的调用，但是输出结果一样，而第三次直接抛出异常，证明这种定义方式不再是默认属于window对象。

3、BOM的核心是window对象，表示浏览器的实例。window在浏览器中有两重身份，一种是ECMAScript中的全局对象，或者说Global对象，另一种是浏览器窗口的js接口。

4、使用var在js中直接定义的变量，会自动变成window对象的属性，但是使用let和const定义的则不会。

代码地址：https://gitee.com/tuzongxun/js-study/blob/master/test4.html