2015.12.08 HTML5真题练习

HTML5学堂：每天一道题，强壮程序员！今日主要涉及12.07题目(作用域、this指向)的解答，以及一道涉及原型、原型链相关知识的题目。

HTML5真题【2015.12.07】答案解析

12.07真题题目如下，最终输出的结果是多少？

<script>
var innerHTML = 'h5course';
window.onload = function() {
var innerHTML = 'HTML5学堂';
var obj = {
innerHTML: 'H5学堂',
fn: function() {
  console.log(this.innerHTML);
}
}
obj.fn();
var peo1 = obj;
peo1.fn();
var peo2 = obj.fn;
peo2();
}
</script>

本题目的答案是：H5学堂，H5学堂，HTML5学堂。

本题目主要考察如下知识点：this的基本指向。

解释一下代码：在定义时，fn是obj的方法，也就是obj.fn = function(){console.log(this.innerHTML)}。this指向函数的所有者，此时fn是这个函数，函数的所有者自然就是obj了。因此，第一个obj.fn()相当于是打印obj.innerHTML，答案是“H5学堂”。之后，将obj赋值给peo1，其实我们可以认为是将obj的地址赋值给了peo1，更简单的来说，就是让peo1和obj指向了同一个空间，此时使用peo1进行fn方法的调用是等价于obj.fn()的，因此答案也是“H5学堂”。

peo2部分，明显发生了变化，不再是将obj赋值给peo2，而是将obj的fn方法赋值给了peo2。此时可以直接简单的理解为 var peo2 = function() {console.log(this.innerHTML)}，此时，peo2成为了一个“方法/功能”，而peo2的所有者是window，因此this指向window，此时this.innerHTML自然就是'HTML5学堂'了。

相关知识：本题目主要涉及this指向

HTML5真题【2015.12.08】题目

<script>
function Fun(a, b) {
this.a = a;
this.b = b;
var c = 3;
}


Fun.prototype.sum = function() {
return this.a + this.b;
}


var fun = new Fun(1, 2);
console.log(fun.c);
console.log(fun.hasOwnProperty("sum"));
</script>

关于每日代码练习题的答案和解析，我们会在明日文章当中，发布相关答案以及基本原理。（PS：周六日不发布题目）