原生JS基础知识（十）

原生JS基础知识

我的github

对象

• 属性的增删改查之属性的删除 ( delete )

  // before delete
  var obj = {
    name: 'xl',
    age: 18,
  }
  
  // execute
  delete obj.age
  
  // after delete
  obj = {
    name: 'xl',
  }
  

  • Tips:

    • 当一个对象的属性未经声明就使用 , 为 undefined

    • 当一个变量未经声明就使用会报错 ( typeof() 除外 )

• 对象的创建方法

  • 对象字面量 ( plainObject )

    var obj = {};
    

  • 构造函数

    • 系统自带

      new Object();
      new Array();
      new Date();
      new Number();
      new String();
      new Boolean();
      

    • 自定义 ( 大驼峰命名 )

      function Car(color) {
        this.name = 'BMW';
        this.color = color;
      }
      var car1 = new Car('red');
      var car2 = new Car('blue');
      

  • Object.create(原型) : 记录于 …/11 原型链部分

浅尝构造函数内部原理

• new 函数执行

• 在函数体最前面隐式地执行 var this = {};

• 执行 this.xxx = xxx;

• 在函数体最后面隐式地执行 return this;

  function Person(param) {
    // var this = {};
    // this.param = param;
    // return this;
  }
  new Person(param);
  

• Tips: 如果使用 new 关键字 , 可显式地返回引用值来"捣乱"(使隐式地 return this 失效) , 但不可显式地返回原始值 , 否则会强制忽略掉显式返回原始值的语句 , 并执行 return this;

包装类 ( new Number()、new String()、new Boolean() )

• 五大原始值作为独立的值存在 , 没有属性和方法

• 只有引用值( 对象 )才有属性和方法

• Tips: typeof(null) == “object”, 但是null作为原始值, 没有属性和方法

  var num1 = 123; // 原始值数字
  var num2 = new Number(123); // 引用值对象
  var num3 = num2 * 2; // num2经过运算又回归原始值数字
  

• 尽管如此 , 系统也坚持能不报错就不报错的原则 , 如下代码系统会隐式地使用包装类将原始值转换为引用值

  var num = 1;
  num.len = 3; // new Number(1).len = 3 && delete
  console.log(num.len); // new Number(1).len --> undefined
  

  var arr = [1, 2, 3, 4];
  arr.length = 2;
  console.log(arr); // [1, 2]
  
  var str = "hello";
  str.length = 2; // new String("hello").length = 2 && delete
  console.log(str); // "hello"
  console.log(str.length); // new String("hello").length --> 5