大挑战，JS前端知识闯关，你过得了几关？

-101.6 | 0

8589934592.8 | 0

解析

位运算符将数字视为32位的有符号整数，而32位整数的取值范围是 -2147483648 ~ 2147483647。

超过32位有符号整数范围取值的数，进行位或操作取整都是不准确的。

2147483647.1 | 0 // 2147483647 正确

2147483648.1 | 0 // -2147483648 错误

-2147483648.1 | 0 // -2147483648 正确

-2147483649.1 | 0 // 2147483647 错误

同样的，我们可以用~~来取整数部分, 当然依旧存在超范围就不准确的问题。

~~ 100.8 // 100 正确

~~ 2147483649.1 // -2147483647 错误

答案

100.8 | 0 // 100

-101.6 | 0 // -101

8589934592.8 | 0 // 0

3. 神奇的eval

---

var x = “global”;

function log1(){

var x = “local”;

return eval(“x”)

}

function log2(){

var x = “local”;

return window.eval(“x”)

}

function log3(){

var x = “local”;

var fn = eval

return fn(“x”)

}

function log4(){

var x = “local”;

return (0, eval)(“x”)

}

log1();

log2();

log3();

log4();

解析

eval函数具备访问调用它那是的整个作用域的能力。

间接调用， 例如绑定eval函数到另外一个变量名，通过变量名调用函数会使代码失去去所有局部作用域访问的能力。

(0, eval) 其也是eval的间接调用。

log1(); // local

log2(); // global

log3(); // global

log4(); // global

答案

4. delete知多少

---

delete null;

delete undefined;

解析

undefined在实现上是一个全局属性， 而null是一个关键字。

Oject.getOwnPropertyDescriptor(global, ‘undefined’)

null在全局上却查询不到描述信息：

Object.getOwnPropertyDescriptor(global, ‘null’)

结果

delete null; // true

delete undefined; // false

5. 类型转换

---

function Person(name, age) {

this.name = name;

this.age = age;

}

Person.prototype.valueOf = function () {

return this.age;

}

Person.prototype.toString = function () {

return this.name

}

Date.prototype.valueOf = function () {

return this.getTime()

}

Date.prototype.toString = function () {

return this.getTime() + “”

}

var person = new Person(“tom”, 100);

console.log(person + 10);

console.log(${person})

console.log(“” + person)

var date = new Date(2001, 0, 0);

console.log(date + 0, typeof (date + 0))

console.log(date + date.getTime());

分析

对象转换成基础数据类型

• Symbol.toPrimitive 优先

• 如果预期转为字符串，Object.prototype.toString

• 如果无预期转为字符串， 先走 Oject.prototye.valueOf， 再走Object.prototype.toString， 特例是Date类型，是先toString，再valueOf

注意两点

1. 预期转为字符串这种字样， 比如 `${person}`

2. Date是特别的，是优先toString

结果

var person = new Person(“tom”, 100);

console.log(person + 10); // 110

console.log(${person}) // tom

console.log(“” + person) // 100

var date = new Date(2001, 0, 0);

console.log(date + 0, typeof (date + 0))

// 9781920000000 string

console.log(date + date.getTime());

// 978192000000978192000000

6. 函数的length

---

function add(num1, num2, num3=1, …args){

}

const boundAdd = add.bind(null, 10);

console.log(boundAdd.length)

问题解析

1. 有默认值的参数，不计入长度

2. 剩余参数不计入长度

3. bind之后，减少对应的length长度

答案

console.log(boundAdd.length) // 1

7. this的指向

---

var value = 1;

var foo = {

value: 2,

bar: function () {

return this.value;

}

}

console.log(foo.bar());

console.log((foo.bar)());

console.log((foo.bar = foo.bar)());

console.log((false || foo.bar)());

console.log((foo.bar, foo.bar)());

解析

ES规范中，引用类型(Reference类型)有一个获取对应值的方法： GetValue。 简单模拟 GetValue 的使用：

var foo = 1;

var fooReference = {

base: EnvironmentRecord,

name: ‘foo’,

strict: false

};

GetValue(fooReference) // 1;

GetValue 返回对象属性真正的值，但是要注意： 调用 GetValue，返回的将是具体的值，而不再是一个 Reference

本题目如果调用了 GetValue， 那么其作用域就变成了全局。

(foo.bar) 并没有调用取值操作，而其余的均调用了取值操作。

答案

console.log(foo.bar()); // 2

console.log((foo.bar)()); // 2

console.log((foo.bar = foo.bar)()); // 1

console.log((false || foo.bar)()); // 1

console.log((foo.bar, foo.bar)()); // 1

8.参数传递

---

function test(param1, param2, param3) {

param1 = “new param1”;

param3 = “new param3”

console.log(param1 == arguments[0]);

console.log(param3 == arguments[2]);

}

function test_strict(param1, param2, param3) {

“use strict”

param1 = “new param1”;

param3 = “new param3”

console.log(param1 == arguments[0]);

console.log(param3 == arguments[2]);

}

test(‘param1’, ‘param2’)

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。