每日思考（2020/01/16）

Posted ericzlin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了每日思考（2020/01/16）相关的知识，希望对你有一定的参考价值。

题目概览

  • 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是调用者，独立调用
window.fn();  // fn是调用者，被window所拥有

  • 使用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）的主要内容，如果未能解决你的问题，请参考以下文章

一个类型思考了 8 年，依旧是最好的！ | 每日趣闻

每日思考（2019/12/9）

每日思考（2019/12/29）

源哥每日一题第十五弹 poj 1190 关于深搜减枝以及对于阅读代码的思考

markdown 每日片段

每日思考记录（11）