一些不错的js题

[xiaohesong]

输出内容系列

输出什么？

function getPersonInfo(one, two, three) {
  console.log(one);
  console.log(two);
  console.log(three);
}

const person = "Lydia";
const age = 21;

getPersonInfo`${person} is ${age} years old`;

是不是大吃一惊，哈哈。这个细节还真是没有注意到。

[yyymini]

方法后面跟模板字符串。。。这是什么写法。。

[xiaohesong]

@withzhaoyu 这个叫做"tagged template"。mdn--Template literals (Template strings)

[yyymini]

@withzhaoyu 这个叫做"tagged template"。mdn--Template literals (Template strings)

😝，谢谢。昨天去了解了下，居然还有这样的用法，涨姿势了

[liaodeen]

涨姿势了。 👍

[xiaohesong]

输出什么？

const name = "Lydia";
age = 21;

console.log(delete name);
console.log(delete age);

• A: false, true
• B: "Lydia", 21
• C: true, true
• D: undefined, undefined

为毛是这个结果？ 因为delete。他如果作用于被var，const，let声明的变量，是不会起作用的，那么就返回false告诉你失败。如果你仔细去了解下，还真是会发现有点东西的。

我们都知道delete多用于删除某个对象的属性，对GC更友好。来看看delete的一些冷知识点。
前面说了var , let, const这些不起作用，对于属性描述configurable为false的属性，他也不起作用。而且如果你删除一个不存在的属性，他还会给你返回true，真是调皮呀。

[xiaohesong]

下面console.log注释掉的值应该是什么语句才可以输出对应的内容？

function* startGame() {
  const answer = yield "Do you love JavaScript?";
  if (answer !== "Yes") {
    return "Oh wow... Guess we're gone here";
  }
  return "JavaScript loves you back ❤️";
}

var game = startGame();
console.log(/* 1 */); // Do you love JavaScript?
console.log(/* 2 */); // JavaScript loves you back ❤️

• A: game.next("Yes").value 和game.next().value
• B: game.next.value("Yes") 和 game.next.value()
• C: game.next().value 和 game.next("Yes").value
• D: game.next.value() 和 game.next.value("Yes")

其实这个也不是很难，第二个和第四个明显是语法有误，就第一个和第三个到底是哪个？
这个还是比较有意思的，如果对generator不熟悉的，第一眼还真是看不出来。可以看看之前写的关于generator的文章，里面对于传参的情况写的也很清楚。
generator也是可以传参数的

[xiaohesong]

下面会输出哪一个？

var status = "😎"

setTimeout(() => {
  const status = "😍"

  const data = {
    status: "🥑",
    getStatus() {
      return this.status
    }
  }

  console.log(data.getStatus())
  console.log(data.getStatus.call(this))
}, 0)

• A: "🥑" and "😍"
• B: "🥑" and "😎"
• C: "😍" and "😎"
• D: "😎" and "😎"

额，如果这个难倒了，那就需要看看这个万恶的this了。

this的那几钟情况或者直接看这里

[xiaohesong]

下面的内容会怎么输出？

const value = "constructor";
value[value][value]('console.log("WTF?")')();

• A: ReferenceError
• B: TypeError
• C: WTF?
• D: console.log("WTF?")

这么突然的一眼看上去还挺操蛋，不过聪明的你想来已经把他给分解了。

[monic-shixi]

下面会输出哪一个？

var status = "😎"

setTimeout(() => {
  const status = "😍"

  const data = {
    status: "🥑",
    getStatus() {
      return this.status
    }
  }

  console.log(data.getStatus())
  console.log(data.getStatus.call(this))
}, 0)

• A: "🥑" and "😍"
• B: "🥑" and "😎"
• C: "😍" and "😎"
• D: "😎" and "😎"

额，如果这个难倒了，那就需要看看这个万恶的this了。

this的那几钟情况或者直接看这里

console.log(data.getStatus())

这个就是当前对象的指向，所以这个应该没有问题。

console.log(data.getStatus.call(this))

这个结果是猜出来的，不过猜对了。 😢

[xiaohesong]

下面的代码会输出什么

var obj = {}
obj.x = obj = {name: 'xiaohesong'}
console.log(`obj is`, obj, `property x is`, obj.x)

• A: obj is {name: "xiaohesong"} property x is {name: "xiaohesong", x: {name: "xiaohesong"}}
• B: obj is {name: "xiaohesong", x: {name: "xiaohesong"}} property x is {name: "xiaohesong"}
• C: obj is {name: "xiaohesong"} property x is undefined
• D: TypeError

你觉得答案是哪个？

显示答案

答案: c

你可能好奇，为什么不是一个循环引用？

因为在

obj.x = obj = {name: 'xiaohesong'}

这段代码中有连续的赋值，导致引用被改变。

下面来详细的说说。
正常情况来说obj = {name: 'xiaohesong'}会有个默认的{name: 'xiaohesong'}返回，就会变成：

obj.x = {name: 'xiaohesong'}

其实这里的连续赋值和这个情况类似，不过多了个引用的问题。

我们知道LHS查找会确定他的作用域，此时找到的obj.x中的obj是上面定义的{}。看看后面的赋值(obj = {name: 'xiaohesong'})，赋值先从这里开始(从左到右嘛), 这时候obj就是{name: 'xiaohesong'}了，这是一个 新的引用 ！ 然后变成了obj.x = {name: 'xiaohesong'}。不错，这里的obj的x属性的值就是{name: 'xiaohesong'}，但是你得知道，这里得obj.x得这个obj得引用是指向{}的。所以最后你的obj.x的值是undefined，因为你最后的obj是指向{name: 'xiaohesong'}这个引用的。

另外，不得不提一句，js中没有指针，只有对值的引用。

[xiaohesong]

下面的代码会输出什么？

function nums(a, b) {
  if
  (a > b)
  console.log('a is bigger')
  else 
  console.log('b is bigger')
  return 
  a + b
}

console.log(nums(4, 2))
console.log(nums(1, 2))

• A: a is bigger, 6 和b is bigger, 3
• B: a is bigger, undefined 和 b is bigger, undefined
• C: undefined 和 undefined
• D: SyntaxError

你觉得答案是哪个？

显示答案

答案: B

其实这个也不是很难，不过这里想说下，对于一些语句他会自动插入分号。

哪些语句？throw，return，break等

[xiaohesong]

下面的代码会输出什么？

function compareMembers(person1, person2 = person) {
  if (person1 !== person2) {
    console.log("Not the same!")
  } else {
    console.log("They are the same!")
  }
}

const person = { name: "Lydia" }

compareMembers(perosn)

• A: Not the same!
• B: They are the same!
• C: ReferenceError
• D: SyntaxError

你觉得答案是哪个？

显示答案

答案: B

答案真的是B吗？ 原题目答案是说B。

但是这里要分情况了。如果你在现代的浏览器，那是会报错的，报什么错，那就你自己试试。知道为啥报错吗？查看es6 function params。

还有一种情况，就是不报错，那就是es5的情况，这种情况不好模拟，因为大多数现代浏览器都支持了es6。es5会输出对应的B这个答案。

从回答里可以看出，作者是想表述的是关于引用的问题，但是出的这个题不是很恰当。

提示：不要被const搞混，你可以把const换成var来试试：

var person = { name: "Lydia" };

function compareMembers(person1, person2 = person) {
  if (person1 !== person2) {
    console.log("Not the same!")
  } else {
    console.log("They are the same!")
  }
}

compareMembers(perosn)

在现代浏览器里是不是一样的效果？

[xiaohesong]

下面的代码会发生什么？

let config = {
  alert: setInterval(() => {
    console.log('Alert!');
  }, 1000),
};

config = null;

• A: setInterval 回调不会被调用
• B: setInterval回调被调用一次
• C: setInterval回调仍然被每秒调用一次
• D: SyntaxError

你觉得答案是哪个？

显示答案

答案: c

这个在定义对象的时候会解析属性值，如果有引用，直接解析引用，所以setInterval被调用了。