考题列表
- JavaScript中的虚值是什么？
- 如何检查值是否虚值？
- 'use strict' 是干嘛用的？
- JavaScript中 this 值是什么？
- 对象的 prototype 是什么？
- 什么是IIFE，它的用途是什么？
- Function.prototype.apply方法的用途是什么？
- Function.prototype.call方法的用途是什么？
- Function.prototype.apply 和 Function.prototype.call 之间有什么区别？
- Function.prototype.bind的用途是什么？
21. JavaScript 中的虚值是什么？
const falsyValues = ['', 0, null, undefined, NaN, false]; 简单的来说虚值就是是在转换为布尔值时变为 false 的值。
22. 如何检查值是否虚值？
使用 Boolean 函数或者 !! 运算符。
23. 'use strict' 是干嘛用的？
"use strict" 是 ES5 特性，它使我们的代码在函数或整个脚本中处于严格模式。严格模式帮助我们在代码的早期避免 bug，并为其添加限制。
严格模式的一些限制：
- 变量必须声明后再使用
- 函数的参数不能有同名属性，否则报错
- 不能使用with语句
- 不能对只读属性赋值，否则报错
- 不能使用前缀 0 表示八进制数，否则报错
- 不能删除不可删除的属性，否则报错
- 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
- eval不能在它的外层作用域引入变量
- eval和arguments不能被重新赋值
- arguments不会自动反映函数参数的变化
- 不能使用arguments.callee
- 不能使用arguments.caller
- 禁止this指向全局对象
- 不能使用fn.caller和fn.arguments获取函数调用的堆栈
- 增加了保留字（比如protected、static和interface） 设立”严格模式”的目的，主要有以下几个：
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
24. JavaScript 中 this 值是什么？
基本上，this指的是当前正在执行或调用该函数的对象的值。this值的变化取决于我们使用它的上下文和我们在哪里使用它。
const carDetails = {
name: "Ford Mustang",
yearBought: 2005,
getName(){
return this.name;
},
isRegistered: true
};
console.log(carDetails.getName()); // Ford Mustang
这通常是我们期望结果的，因为在getName方法中我们返回this.name，在此上下文中，this指向的是carDetails对象，该对象当前是执行函数的“所有者”对象。
接下我们做些奇怪的事情：
var name = "Ford Ranger";
var getCarName = carDetails.getName;
console.log(getCarName()); // Ford Ranger
上面打印Ford Ranger，这很奇怪，因为在第一个console.log语句中打印的是Ford Mustang。这样做的原因是getCarName方法有一个不同的“所有者”对象，即window对象。在全局作用域中使用var关键字声明变量会在window对象中附加与变量名称相同的属性。请记住，当没有使用“use strict”时，在全局作用域中this指的是window对象。
console.log(getCarName === window.getCarName); // true
console.log(getCarName === this.getCarName); // true
本例中的this和window引用同一个对象。
解决这个问题的一种方法是在函数中使用apply和call方法
console.log(getCarName.apply(carDetails)); // Ford Mustang
console.log(getCarName.call(carDetails)); // Ford Mustang
apply和call方法期望第一个参数是一个对象，该对象是函数内部this的值。
IIFE或立即执行的函数表达式，在全局作用域内声明的函数，对象内部方法中的匿名函数和内部函数的this具有默认值，该值指向window对象。
(function (){
console.log(this);
})(); // 打印 "window" 对象
function iHateThis(){
console.log(this);
}
iHateThis(); // 打印 "window" 对象
const myFavoriteObj = {
guessThis(){
function getName(){
console.log(this.name);
}
getName();
},
name: 'Marko Polo',
thisIsAnnoying(callback){
callback();
}
};
myFavoriteObj.guessThis(); // 打印 "window" 对象
myFavoriteObj.thisIsAnnoying(function (){
console.log(this); // 打印 "window" 对象
});
如果我们要获取myFavoriteObj对象中的name属性（即Marko Polo）的值，则有两种方法可以解决此问题。 一种是将 this 值保存在变量中。
const myFavoriteObj = {
guessThis(){
const self = this; // 把 this 值保存在 self 变量中
function getName(){
console.log(self.name);
}
getName();
},
name: 'Marko Polo',
thisIsAnnoying(callback){
callback();
}
};
第二种方式是使用箭头函数
const myFavoriteObj = {
guessThis(){
const getName = () => {
console.log(this.name);
}
getName();
},
name: 'Marko Polo',
thisIsAnnoying(callback){
callback();
}
};
箭头函数没有自己的 this。它复制了这个封闭的词法作用域中this值，在这个例子中，this值在getName内部函数之外，也就是myFavoriteObj对象。
25. 对象的 prototype(原型) 是什么？
简单地说，原型就是对象的蓝图。如果它存在当前对象中，则将其用作属性和方法的回退。它是在对象之间共享属性和功能的方法，这也是JavaScript实现继承的核心。
const o = {};
console.log(o.toString()); // logs [object Object]
即使o对象中不存在o.toString方法，它也不会引发错误，而是返回字符串[object Object]。当对象中不存在属性时，它将查看其原型，如果仍然不存在，则将其查找到原型的原型，依此类推，直到在原型链中找到具有相同属性的属性为止。原型链的末尾是Object.prototype。
console.log(o.toString === Object.prototype.toString); // logs true
26. 什么是 IIFE，它的用途是什么？
IIFE或立即调用的函数表达式是在创建或声明后将被调用或执行的函数。创建IIFE的语法是，将function (){}包裹在在括号()内，然后再用另一个括号()调用它，
如：(function(){})()
(function(){
...
} ());
(function () {
...
})();
(function named(params) {
...
})();
(() => {
});
(function (global) {
...
})(window);
const utility = (function () {
return {
...
}
})
这些示例都是有效的IIFE。倒数第二个救命表明我们可以将参数传递给IIFE函数。最后一个示例表明，我们可以将IIFE的结果保存到变量中，以便稍后使用。
IIFE的一个主要作用是避免与全局作用域内的其他变量命名冲突或污染全局命名空间，来个例子。
<script src="https://cdnurl.com/somelibrary.js"></script>
假设我们引入了一个omelibr.js的链接，它提供了一些我们在代码中使用的全局函数，但是这个库有两个方法我们没有使用：createGraph和drawGraph，因为这些方法都有bug。我们想实现自己的createGraph和drawGraph方法。
解决此问题的一种方法是直接覆盖：
<script src="https://cdnurl.com/somelibrary.js"></script>
<script>
function createGraph() {
// createGraph logic here
}
function drawGraph() {
// drawGraph logic here
}
</script>
当我们使用这个解决方案时，我们覆盖了库提供给我们的那两个方法。
另一种方式是我们自己改名称：
<script src="https://cdnurl.com/somelibrary.js"></script>
<script>
function myCreateGraph() {
// createGraph logic here
}
function myDrawGraph() {
// drawGraph logic here
}
</script>
当我们使用这个解决方案时，我们把那些函数调用更改为新的函数名。
还有一种方法就是使用IIFE：
<script src="https://cdnurl.com/somelibrary.js"></script>
<script>
const graphUtility = (function () {
function createGraph() {
// createGraph logic here
}
function drawGraph() {
// drawGraph logic here
}
return {
createGraph,
drawGraph
}
})
</script>
在此解决方案中，我们要声明了graphUtility 变量，用来保存IIFE执行的结果，该函数返回一个包含两个方法createGraph和drawGraph的对象。
IIFE 还可以用来解决一个常见的面试题：
var li = document.querySelectorAll('.list-group > li');
for (var i = 0, len = li.length; i < len; i++) {
li[i].addEventListener('click', function (e) {
console.log(i);
})
假设我们有一个带有list-group类的ul元素，它有5个li子元素。当我们单击单个li元素时，打印对应的下标值。但在此外上述代码不起作用，这里每次点击 li 打印 i 的值都是5，这是由于闭包的原因。
闭包只是函数记住其当前作用域，父函数作用域和全局作用域的变量引用的能力。当我们在全局作用域内使用var关键字声明变量时，就创建全局变量i。因此，当我们单击li元素时，它将打印5，因为这是稍后在回调函数中引用它时i的值。
使用 IIFE 可以解决此问题：
var li = document.querySelectorAll('.list-group > li');
for (var i = 0, len = li.length; i < len; i++) {
(function (currentIndex) {
li[currentIndex].addEventListener('click', function (e) {
console.log(currentIndex);
})
})(i);
}
该解决方案之所以行的通，是因为IIFE会为每次迭代创建一个新的作用域，我们捕获i的值并将其传递给currentIndex参数，因此调用IIFE时，每次迭代的currentIndex值都是不同的。
27. Function.prototype.apply 方法的用途是什么？
apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。
const details = {
message: 'Hello World!'
};
function getMessage(){
return this.message;
}
getMessage.apply(details); // 'Hello World!'
call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。
const person = {
name: "Marko Polo"
};
function greeting(greetingMessage) {
return `${greetingMessage} ${this.name}`;
}
greeting.apply(person, ['Hello']); // "Hello Marko Polo!"
28. Function.prototype.call 方法的用途是什么？
call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。
const details = {
message: 'Hello World!'
};
function getMessage(){
return this.message;
}
getMessage.call(details); // 'Hello World!'
注意：该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。
const person = {
name: "Marko Polo"
};
function greeting(greetingMessage) {
return `${greetingMessage} ${this.name}`;
}
greeting.call(person, 'Hello'); // "Hello Marko Polo!"
29. Function.prototype.apply 和 Function.prototype.call 之间有什么区别？
apply()方法可以在使用一个指定的 this 值和一个参数数组（或类数组对象）的前提下调用某个函数或方法。call()方法类似于apply()，不同之处仅仅是call()接受的参数是参数列表。
const obj1 = {
result:0
};
const obj2 = {
result:0
};
function reduceAdd(){
let result = 0;
for(let i = 0, len = arguments.length; i < len; i++){
result += arguments[i];
}
this.result = result;
}
reduceAdd.apply(obj1, [1, 2, 3, 4, 5]); // 15
reduceAdd.call(obj2, 1, 2, 3, 4, 5); // 15
30. Function.prototype.bind 的用途是什么？
bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
import React from 'react';
class MyComponent extends React.Component {
constructor(props){
super(props);
this.state = {
value : ""
}
this.handleChange = this.handleChange.bind(this);
// 将 “handleChange” 方法绑定到 “MyComponent” 组件
}
handleChange(e){
//do something amazing here
}
render(){
return (
<>
<input type={this.props.type}
value={this.state.value}
onChange={this.handleChange}
/>
</>
)
}
}
