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:周六日不发布题目)

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

JS魔法堂:追忆那些原始的选择器

一、前言                                                                            ...

2267
来自专栏柠檬先生

VUE 入门基础(3)

三,模板语法   Vue将模板编译成虚拟DOM渲染函数,结合响应系统,在应用状态改变时,vue能够智能地计算出重新渲染组件的最小代价并DOM操作上。   插值,...

2256
来自专栏LanceToBigData

Jsoup(一)Jsoup详解(官方)

一、Jsoup概述 1.1、简介     jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API...

8785
来自专栏Java 技术分享

JavaWeb 学习之 JSTL

39914
来自专栏彭湖湾的编程世界

【Vue】详解Vue生命周期

Vue实例的生命周期全过程(图) ? (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期...

2657
来自专栏前端说吧

Sass控制命令及函数知识整理

4056
来自专栏GreenLeaves

JavaScript之insertBefore()和自定义insertAfter()的用法。

在JS图片库的第五版开发完后http://www.cnblogs.com/GreenLeaves/p/5691797.html#js_Five_Version我...

2119
来自专栏源码之家

EXCEL快速合并相同值

2035
来自专栏冰霜之地

深入解析 Go 中 Slice 底层实现

切片是 Go 中的一种基本的数据结构,使用这种结构可以用来管理数据集合。切片的设计想法是由动态数组概念而来,为了开发者可以更加方便的使一个数据结构可以自动增加和...

1353
来自专栏Keegan小钢

Android技术积累:开发规范

上个月发布了Android项目重构的三篇系列文章,其中,界面篇中提到了在项目中保持规范性的重要性,也有简单举了几个例子。这篇文章则将其延伸,提供更完整的开发规范...

1082

扫码关注云+社区