题目概览
html 和 html5 有什么区别?
用 CSS 绘制一个三角形
对 this 的理解
题目解答
HTML 和 html5 有什么区别?
文档声明区别: HTML 是超文本标记语言, 一种纯文本类型的语言. HTML5 文档声明 (<!DOCTYPE HTML>) 方便书写, 精简, 有利于程序员快速的阅读和开发.
结构语义区别: HTML 没有体现结构语义化的标签, 如:<div id="nav"></div>,html5 添加了许多具有语义化的标签, 如:<article>,<aside>,<audio>,<bdi>...
拖放效果和绘图: HTML 不允许拖放效果, 无法绘制复杂图形, 例: 圆形, 矩形, 三角形等形状. HTML5 允许拖放效果, 允许绘制圆形, 矩形, 三角形等形状.
频和视频的支持: HTML 如果不使用 Flash 播放器支持, 它不支持音频和视频. HTML5 使用 < audio > 和 < video > 标签来支持音频和视频控制.
存储数据: HTML 使用 cookie 来存储临时数据. HTML5 使用 SQL 数据库和应用程序缓存来存储脱机数据
语法的处理: HTML 无法处理不准确的语法; HTML5 能够处理不准确的语法
元素和属性: HTML 中不存在 charset,async 和 ping 等属性; 但 charset,async 和 ping 的属性是 HTML 5 的一部分.
HTML5 中有许多 HTML 元素已被修改或删除.
HTML5 中添加了许多新元素, 如: nav, audio, figcaption, progress, command, time, datalist, video, figure, meter, data, section, time, aside, canvas, summary, rp, rt, details, wbr, header, footer, keygen, embed, article, hgroup, bdi, mark, output, source, track, section, Ruby 等等
用 CSS 绘制一个三角形
- .triangle {
- width: 0;
- border-bottom: 35px solid lightgreen;
- border-left: 35px solid transparent;
- }
- .triangle:after {
- content: '';
- border: 35px solid transparent;
- border-bottom-color: lightgreen;
- }
对 this 的理解
this 的指向, 是在函数被调用的时候确定的. 也就是执行上下文被创建时确定的. 在函数执行过程中, this 一旦被确定, 就不可更改了.
- var a = 10;
- var obj = {
- a: 20
- }
- function fn() {
- console.log(this.a);
- }
- fn(); // 10
- fn.call(obj); // 20
- function change() {
- this = obj; // 这句话试图修改 this, 运行后会报错
- console.log(this.a);
- }
- change();
全局对象中的 this: 全局环境中的 this, 指向它本身
- // 通过 this 绑定到全局对象
- this.a2 = 20;
- // 通过声明绑定到变量对象, 但在全局环境中, 变量对象就是它自身
- var a1 = 10;
- // 仅仅只有赋值操作, 标识符会隐式绑定到全局对象
- a3 = 30;
- // 输出结果会全部符合预期
- console.log(a1);
- console.log(a2);
- console.log(a3);
函数中的 this: 在一个函数上下文中, this 由调用者提供, 由调用函数的方式来决定.
如果调用者函数, 被某一个对象所拥有, 那么该函数在调用时, 内部的 this 指向该对象.
- var a = 20;
- var obj = {
- a: 10,
- c: this.a,
- fn: function () {
- return this.a;
- }
- }
- console.log(obj.c); //undefined
- console.log(obj.fn());//10
如果函数独立调用, 那么该函数内部的 this, 则指向 undefined.
- var a = 20;
- function fn() {
- console.log(this.a);
- }
- fn();//undefined
- var a = 20;
- function fn() {
- function foo() {
- console.log(this.a);
- }
- foo();
- }
- fn();//undefined
但是在非严格模式中, 当 this 指向 undefined 时, 它会被自动指向全局对象
- // 为了能够准确判断, 我们在函数内部使用严格模式, 因为非严格模式会自动指向全局
- function fn() {
- 'use strict';
- console.log(this);
- }
- fn(); // fn 是调用者, 独立调用
- Windows.fn(); // fn 是调用者, 被 Windows 所拥有
使用 call,apply 显示指定 this: 它们的第一个参数都为 this 将要指向的对象
- function fn(num1, num2) {
- console.log(this.a + num1 + num2);
- }
- var obj = {
- a: 20
- }
- fn.call(obj, 100, 10); // 130
- fn.apply(obj, [20, 10]); // 50
构造函数与原型方法上的 this
- function Person(name, age) {
- this.name = name;
- this.age = age;
- }
- Person.prototype.getName = function() {
- return this.name;
- }
- var p1 = new Person('Nick', 20);
- p1.getName();
- /* 当 new 操作符调用构造函数时, this 其实指向的是这个新创建的对象, 最后又将新的对象返回出来, 被实例对象 p1 接收. 因此, 构造函数的 this, 指向了新的实例对象: p1. 而原型方法上的 this 就好理解多了, p1.getName()中的 getName 为调用者, 他被 p1 所拥有, 因此 getName 中的 this, 也是指向了 p1*/
每日思考(2020/01/16)
来源: http://www.bubuko.com/infodetail-3384191.html