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

Posted 涂宗勋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了全栈之路-前端javascript基础知识5相关的知识,希望对你有一定的参考价值。

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定义的则不会。

以上是关于全栈之路-前端javascript基础知识5的主要内容,如果未能解决你的问题,请参考以下文章

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

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

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

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

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

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