码迷,mamicode.com
首页 > 其他好文 > 详细

每日思考(2020/01/16)

时间:2020-01-16 23:46:06      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:ESS   变量   报错   datalist   change   embed   绘图   参数   更改   

题目概览

  • 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)

标签:ESS   变量   报错   datalist   change   embed   绘图   参数   更改   

原文地址:https://www.cnblogs.com/EricZLin/p/12203645.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!