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操作DOM在父元素中的结尾添加子节点注意

所以js是不能直接传入字符串的,但是jquery的append可以直接传入html字符串。

934
来自专栏木子昭的博客

Javascript常用API备忘录

Bom常见API 获取浏览器信息 var ua = navigator.userAgent if (ua.indexOf('Chrome')){ co...

2613
来自专栏JAVA后端开发

vue解决字段类型为数字导致单选不正确的问题

最近在研究vue,也试着写一些Vue页面。 vue中,我返回一个值,"sex":0, 单选框代码为

2804
来自专栏柠檬先生

VUE 入门基础(3)

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

2196
来自专栏前端说吧

Sass-学习笔记【进阶篇】

4838
来自专栏积累沉淀

JavaScript DOM基础2

DOM自身存在很多类型,比如Element类型:表示的是元素节点,再比如Text类型:表示的是文本节点。DOM也提供了一些扩展功能。 一.DOM类型 DOM基础...

1818
来自专栏阿炬.NET

VB2008写的--收藏夹查看程序,适合.net初学者研究(附源码)

3255
来自专栏LanceToBigData

Jsoup(一)Jsoup详解(官方)

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

6615
来自专栏冰霜之地

深入解析 Go 中 Slice 底层实现

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

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

【Vue】详解Vue生命周期

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

2487

扫码关注云+社区