javascript 高级程序设计 6-10

[ycshill]

• 理解对象-属性类型
• 数据属性
  • 定义：普通定义；
  • 特性：
    • configurable: 1. 是否通过 delete 可以删除 2. 是否可以改为访问其属性 3. 是否可以修改属性特性；
    • enumerable: 同下
    • writable: 是否可以修改属性的值；
    • value: 这个属性的值；
• 访问器属性
  • 定义：必须使用 Object.defineProperty(对象，属性名，特性组成的对象)
  • 常见的使用方式： 设置一个属性的值，会导致其他属性的变化；
  • 特性
    • configurable : 1.是否能通过 delete 删除；2.是否能修改特性；3.是否能把属性修改为数据属性；
    • enumerable: 是否能通过for-in循环返回属性；
    • set： 写入属性时候调用， 默认值为undefined，如果定义的时候没有写，则不能写入；
    • get：读取的时候调用，默认为undefined, 定义时没有，不能独缺；
• 例子

var person = {
  name: 'lily';  // 数据属性
  _weight: 50;
}

// height就是访问器属性
Object.defineProperty(person, 'height', {
get: function() {
  return 168;
},
set: function(newVal) {
  newVal > 180 ? this._weight = 60 : 50;
}
})

• 三个方法

  • Object.defineProperty(对象，属性名， 特性组成对象) 可以 1. 修改数据属性特性； 2.可以定义访问器属性；
  • Object.defineProperties(对象，属性的字面量对象) 可以同一时间，创建多个属性；

   Object.defineProperties(person, {
     name： {
        writable: true,
        value: 'lily',
     },
     height: {
       get: function() { return 168 }
     }
   })
  

  • 读取属性特性 Object.getOwnPropertyDescriptor(对象，属性名)

[ycshill]

创建对象

• 工厂模式
  • 进步：解决创建相似对象的问题；
  • 缺点：不能解决对象的识别问题；
  • 过程：创建一个对象，为对象添加属性和方法，返回对象；
  • 代码:

   function createPerson(name, age, job) {
     var o = new Object();
     o.name = name;
     o.age = age;
     o.job = job;
     o.sayName = function() {
      console.log(this.name);
     }
     retun o;
    }
    var p1 = createPerson('lily', 27', 'engineer');
  

• 构造函数模式
  • 进步：可以给实例标识一种特定的类型 p1 instanceof Person;
  • 缺点：如果有方法的话，每个实例都要重新创建一个方法，因为函数是个对象；
  • 过程：一般函数名的首字母大写，通过new创建实例；
  • 代码

  function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function() {  // 创建的每个实例，都要创建一个方法；
      console.log(this.name);
    }
  }
  
  var person1 = new Person('lily', 27, '前端开发');
  

• 原型模式
  • 进步：将公共的属性和方法挂载到原型对象上；
  • 缺点：如果原型对象上有一个引用对象，例如数组，一个实例改变，其他的实例都改变了；
  • 过程：字面量的形式和直接添加属性；
  • 代码：

  function Person() {}
  Person.prototype.name = 'lily';
  Person.prototye.age = 27;
  Person.ptototype.job = "工程师";
  Person.prototype.sayName = function() {
    console.log(this.name);
  }
  
  var p1 = new Person();
  p1.sayName();  // 'lily'
  

• 组合构造函数模式和原型模式
  • 进步：如果对象上有引用类型的属性的时候，一个实例改变，不会影响其他实例的改变；
  • 缺点：
  • 过程：构造函数用户定义实例的属性，原型模式用于定义公用的方法和共享属性
  • 代码：

  function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
  }
  Perosn.prototype = {
    constructor: Person,
   sayName: function() {
     console.log(this.name);
    }
  }
  

• 动态原型模式
  • 优点：可以通过检查某个应该存在的方法是否有效，来确定是否需要初始化原型；
  • 缺点：
  • 过程：
  • 代码：

  function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    if (typeof this.sayName !== 'function') {
     Person.prototype.sayName = function() {
      console.log(this.name);
     }
    }
  }
  

• 寄生构造函数模式
  • 优点：不直接修改原来的类型，创建一个新的特殊的对象
  • 缺点：不能确定是一种类型
  • 过程：1. 通过new 调用
  • 代码：

  function SpecialArray() {
    var values = new Array();
   values.push.apply(values, arguments);
   values.toPipedString = function() {
     return this.join('|');
   }
  return values;
  }
  
  var colors = new SpecialArray('red', 'blues'); // 通过new 调用
  

• 稳妥构造函数模式
  • 优点：除了通过方法，不能直接方法他的成员变量
  • 缺点：不是一种类型
  • 过程；
  • 代码：

  function Person(name, age, job) {
   var o = new Object();
   o.sayName = function() {
     console.log(name);
   }
  return o;
  }
  

[ycshill]

创建对象

• 通过new 调用函数的过程

• 创建一个新的对象；

• 将构造函数的作用域赋给新的对象；

• 执行构造函数中的代码；

• 返回新的对象；

• 原型模式中的几个概念

  • prototype：每个函数都有一个prototype 属性，是一个指针，指向原型对象；
  • 原型对象：是个对象，包含特定类型的共享属性和方法，每个原型对象都自带一个constructor属性，这个属性是一个指向prototype属性所在函数的指针，如果原型对象重写，这个指针会被切断；
  • _proto_: 每个实例都有一个_proto_的属性，指向原型对象，如果原型对象被重写，会切断；
  • isPrototype()： 判断对象实例和原型对象之间是否存在指针关系，例如 Person.prototype.isPrototypeof(p1);

• getPrototypeOf(实例): 从实例得到实例的原型对象

• 代码读取某个对象的某个属性的过程：搜索对象实例本身--->搜索对象的原型对象

• 实例.hasOwnPrototype(属性名) : 某个属性是否是实例属性；

• in: 访问的是实例中和原型中的属性；

• Object.keys() : 返回对象上所有可枚举的属性；

• Object.getOwnPropertyNames(person) : 得到所有的实例属性；

• 关系图，重写原型对象之前：

[ycshill]

继承

• 分为：接口继承和实现继承；
• 实现继承：用原型链实现；
• 常见的继承实现方式：

  • 原型链

    • 基本概念：让A类型的原型对象 = B类型的实例，从而实现A继承B；
    • 特点：能确定一种类型，能实现继承，
    • 缺点：引用类型值的原型属性，会被所有的实例共享；
    • 代码：

     function Super() {
       this.super = 'super';
     }
    Super.prototype.getType = function() {
      return this.super;
    }
    function Sub() {
      this.sub = 'sub';
    }
    Sub.prototype = new Super();  // 实现继承，这样Sub.prototype 原型就有了Super实例的所有属性和方法
    
    Sub.prototype.constructor = Sub; 
    // 重写 getType 方法
    Sub.prototype.getType = function() {
      return this.sub || this.super;
    }
    
    var instance = new Sub();
     instance.getType();  // sub
    

  • 借用构造函数

    • 基本概念：在子类的构造函数中，调用超类的构造函数；
    • 缺点：共享的函数没有办法放在原型中，超类的原型对象中的属性和方法对子类是不可见的
    • 优点：避免了引用属性值共享的情况
    • 代码：

     function Super() {
       this.colors = ['red', 'green'];
     }
     function Sub() {
       Super.call(this);  // 调用超类的构造函数，可以传参
      this.name = 'lily';  // 可以写自己的实例属性
     }
     var sub1 = new Sub();
     sub1.colors.push('black');
     var sub2 = new Sub();
     console.log(sub2.colors); //  ["red", "green"]
    

  • 组合

    • 概念：使用借用构造函数和原型链的方式；
    • 缺点：调用两次超类的构造函数
    • 优点：有自己的类型，可以单独继承实例属性和原型属性，方法；

    function Person(age) { 
      this.age = age;
      this.xiguan = ['吃饭', '睡觉'];
    }
    Person.prototype.say = function() {
      console.log('我' + this.age);
    }
    
    function Gril(name, age) {
      Person.call(this,age);  // 调用一次构造函数
      this.name = name;
    }
    
    Gril.prototype = new Person();  // 调用一次构造函数
    
    var g1 = new Gril('lily', 27);
    g1.xiguan.push('健身');
    console.log(g1.name); // lily
    console.log(g1.xiguan); // ["吃饭", "睡觉", "健身"]
    

  • 原型式继承

    • 概念：基于已有的对象，创建一个新的对象；
    • 缺点：没有类型；
    • 使用场景：只是操作对象；
    • 代码

    function creatObj(oldObj) {
      function NewObj() {};
      Newobj.prototype = oldObj;
      return new NewObj();
    }
    

    • Object.create(oldObj, 新对象的属性对象)

     var Person = {
       name: 'lily',
       age: 10
     };
    var newPerson = Object.create(Person, {
      weight: {
        value: 50
      }
    })
    
    

  newPerson.weight; // 50

  - 寄生式的继承
  - 在原型式继承的基础上，**增强对象**;
  - 代码：
  

  function createAn(original) {
  var clone = creatObj(original); // 通过调用函数创建一个新的对象
  clone.say = function() { console.log('say hi') } // 增强对象
  return clone; // 返回对象
  }

• 寄生组合式继承
• 概念：借用构造函数来继承属性，通过原型链来继承方法，使用寄生式的继承来继承超类的原型，再将结果指定给子类型的原型
• 优点：不用调用两次超类的构造函数
• 代码：

// 原型式继承
function createObj(obj) {
  function NewObj() {};
  NewObj.prototype = obj;
  return new NewObj();
}
// 寄生组合继承
function inheritPrototype(subType, superType) {
 var prototype = createObj(superType.prototype);  // 创建一个副本
 prototype.constructor = subType;  // 增强对象
 subType.prototype = prototype; // 指定对象
}

function Person(name) {
 this.name = name;
 this.xiguan = ['吃饭', '睡觉'];
} 

Person.prototype.say = function() {
  console.log(this.name + this.xiguan);
}

function Gril(name, age) {
  Person.call(this, name);
  this.age = age;
}

inheritPrototype(Gril, Person);

var g1 = new Gril('lily', 12);
g1.say();  // lily吃饭,睡觉

[ycshill]

客户端检测

第 9 章，一种感觉不知道学点什么的感觉