目录
1. 变量提升(Hoisting)
2. this 绑定
2.1. this 是什么?
2.2. this 绑定规则
3. 运算符优先级与关联性
4. 几道笔试题
1. 变量提升(Hoisting)
Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.
示例1:
示例2:
示例3:
示例4:
2. this 绑定
2.1. this 是什么?
2.2. this 绑定规则
示例1:
示例2:
示例3:
示例4:
示例5:
3. 运算符优先级与关联性
3.1. 优先级是什么?
运算符的优先级决定了表达式中运算执行的先后顺序,优先级高的运算符最先被执行。
下面从语法分析
角度理解一波优先级
优先级的产生源自于操作数不知道属于哪个操作符。以下面的表达式为例,其中大写字母是操作符,小写字母是操作数。
a B c D e
问题来了,c 是和 a 一起执行 B 操作即 (a B c)D e,还是 c 和 e 一起执行 D 操作即 a B (c D e)?中间的 c 表示很为难。运算符是由“操作符和操作数”组成的,操作符在位置上紧挨着操作数,因此对于优先级的直观理解就是,对于同一个操作数,它周围的哪个操作数更加“吸引”它,它就先跟那个操作符“优先”计算,这就是操作符优先级的由来。
当一个操作数的两边都有操作符时才是操作符绑定权限发挥作用的地方,即操作符数 c 是跟操作符 B 操作还是跟操作符 D 操作,取决于操作符 B 和 D 的优先级,谁大就跟谁。
3.1. 关联性是什么?
关联性决定了拥有相同优先级的运算符的执行顺序。考虑下面这个表达式:
a OP b OP c
左关联(左到右)相当于把左边的子表达式加上小括号(a OP b) OP c,右关联(右到左)相当于a OP (b OP c)。赋值运算符是右关联的,所以你可以这么写:
a = b = 5;
结果 a 和 b 的值都会成为5。这是因为赋值运算符的返回结果就是赋值运算符右边的那个值,具体过程是:b被赋值为5,然后a也被赋值为 b=5 的返回值,也就是5。
示例1:
示例2:
示例3:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function Foo(){
this.getName = function(){
console.log(3);
return {
getName: getName
}
}
getName = function(){
console.log(1);
};
return this;
}
Foo.getName = function(){
console.log(2);
}
Foo.prototype.getName = function(){
console.log(2);
}
var getName = function(){
console.log(4);
}
function getName(){
console.log(5);
}
// 给出下面代码的运行结果
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new Foo().getName().getName();
new new Foo().getName();
</script>
</body>
</html>
4. 几道笔试题
题目01:
题目02:
正确答案:A
题目03:
题目04:
参考:
《你不知道的 JavaScript(上卷)》 《自制编程语言》 运算符优先级: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence Hoisting: https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting Gentle Explanation of "this" in JavaScript: https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/ ECMA-262-10th: https://www.ecma-international.org/ecma-262/10.0/index.html#sec-this-keyword https://www.ecma-international.org/ecma-262/10.0/index.html#sec-resolvethisbinding https://www.ecma-international.org/ecma-262/10.0/index.html#sec-getthisenvironment