8道很有意思的vue和js题

1.下面代码的输出结果是什么？

window.n = 'window name'
let obj = {
    n: 'obj name',
    sayN(){
        console.log(this.n)
    }
}

let fn = obj.sayN
fn()

答案: 'window name'
原因: this指向他的直接调用者, 没有调用者, 非严格模式下是指向window

2.下面代码的输出结果是什么？

window.n = 'window name'
let obj = {
    n: 'obj name',
    sayN: () => {
        console.log(this.n)
    }
}

obj.sayN()

答案: 'window name'
原因: es6的箭头函数是词法作用域, 也就是块作用域

3.下面代码的输出结果是什么？

class A{
    constructor(){
        this.name = 'A'
    }
    sayName(){
        console.log(this.name)
    }
}
class B extends A{
    constructor(){
        super()
        this.name = 'B'
    }
}

let obj = new B()
console.log(obj.sayName)

答案: 'B'
原因: B继承了A的原型拥有了sayName()方法, 并且this指向B

4.下面代码的输出结果是什么？

Promise.reject('error')
    .then( ()=>{console.log('success1')}, ()=>{console.log('error1')} )
    .then( ()=>{console.log('success2')}, ()=>{console.log('error2')} )

答案: 先输出error1再输出: success2
原因: reject()之后的then()返回的是一个pending状态的Promise

5.关于 Vue 中的 key 属性, 正确的是

 A.当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
 B.为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
 C.理想的 key 值是每项都有的且唯一的 id。
 D.2.2.0+ 的版本里，当在组件中使用 v-for 时，key 是必须的。

答案: 全对

6.下面代码的输出结果是什么？

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

var Component = Vue.extend({
  mixins: [myMixin],
  methods: {
    hello(){
      console.log('hello from options')
    }
  }
})

var component = new Component()

答案: 'hello from options'
原因: 如果mixin的选项和组件的选项一样, 组件会覆盖mixin, 如果是对象会浅层合并; 如果是生命周期, 会先执行mixin的

7.下面代码的输出结果是什么？

function getSomething(){
    setTimeout(function(){
        return 'hello'
    })
}

let something = getSomething()
console.log(something)

答案: 'undefined'
原因: 执行console.log()的时候, 定时器里的函数还在异步队列里

8.下面代码的输出结果是什么？

let _name = 'MyName'
let obj = {}
Object.defineProperty(obj, 'name', {
    get(){
        return _name
    },
    set(value){
        _name = value
    }
})

obj.name = 'NewName'
console.log(_name)

答案: 'NewName'
原因: Object.defineProperty()方法为obj添加get和set函数, 在set里可以监控到name的改变