每日思考（2020/03/02）

Posted 2020-11-27 ericzlin

题目概览

• html5中新添加的表单属性有哪些
• 如何实现视差滚动的效果
• 写出4个使用this的典型例子

HTML5中新添加的表单属性有哪些

• 新的 form 属性：
  • autocomplete： form 应该拥有自动完成功能
  • novalidate：提交表单时不应该验证 form 或 input 域
• 新的 input 属性：
  • autocomplete： input 域应该拥有自动完成功能
  • autofocus：在页面加载时，域自动地获得焦点
  • form：输入域所属的一个或多个表单
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)：表单重写属性允许您重写 form 元素的某些属性设定
  • height 和 width：用于 image 类型的 input 标签的图像高度和宽度
  • list：输入域的 datalist。datalist 是输入域的选项列表
  • min, max 和 step：用于为包含数字或日期的 input 类型规定限定（约束）
  • multiple：输入域中可选择多个值
  • pattern (regexp)：用于验证 input 域的模式（pattern）
  • placeholder：提供一种提示（hint），描述输入域所期待的值
  • required：必须在提交之前填写输入域（不能为空）

如何实现视差滚动的效果

• 含义：就是在同一视角下，鼠标或者页面滚动时，不同元素以不同的速率跟随滚动，产生生动的效果。
  如何实现视差滚动
• 原理：ackground-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。scroll默认值。背景图像会随着页面其余部分的滚动而移动。fixed当页面的其余部分滚动时，背景图像不会移动
• 实现：《10个优秀视差滚动插件》

写出4个使用this的典型例子

• 全局环境中的 this，指向它本身

  // 通过 this 绑定到全局对象
  this.a2 = 20;
  
  // 通过声明绑定到变量对象，但在全局环境中，变量对象就是它自身
  var a1 = 10;
  
  // 仅仅只有赋值操作，标识符会隐式绑定到全局对象
  a3 = 30;
  
  // 输出结果会全部符合预期
  console.log(a1); // 10
  console.log(a2); // 20
  console.log(a3); // 30

• 函数中的this：在一个函数上下文中，this 由调用者提供，由调用函数的方式来决定。如果调用者函数 被某一个对象所拥有，那么该函数在调用时，内部的 this 指向该对象。如果函数独立调用，那么该函数内部的 this，则指向 undefined。 但是在非严格模式中，当 this 指向 undefined 时，它会被自动指向全局对象

  // demo01
  var a = 20;
  function fn() {
      console.log(this.a); // undefined
  }
  fn(); 
  // demo02
  var a = 20;
  function fn() {
      function foo() {
          console.log(this.a); // undefined
      }
      foo();
  }
  fn();
  // demo03
  var a = 20;
  var obj = {
      a: 10,
      c: this.a + 20,
      fn: function () {
          return this.a;
      }
  }
  console.log(obj.c); // NaN
  console.log(obj.fn()); // 10
  // 为了能够准确判断，我们在函数内部使用严格模式，因为非严格模式会自动指向全局
  function fn() {
      'use strict';
      console.log(this);
  }
  
  fn();  // fn是调用者，独立调用
  window.fn();  // fn是调用者，被window所拥有

• 使用call，apply显示指定this：

  var foo = {
    name: 'joker',
    showName: function() {
            console.log(this.name);
    }
  }
  var bar = {
    name: 'rose'
  }
  foo.showName.call(bar); // rose

• 构造函数与原型方法上的this

  function Person(name, age) {
      //构造函数的 this，指向了新的实例对象 p1
      this.name = name;
      this.age = age;   
  }
  
  Person.prototype.getName = function() {
      //它被 p1 所拥有，因此这里的 this，也是指向了p1
      return this.name;
  }
  var p1 = new Person('Nick', 20);
  p1.getName();