前端学习-面向对象概念

面向对象的设计思想

抽象出 Class(构造函数)
根据 Class(构造函数) 创建 Instance(实例)
指挥 Instance 得结果

创建对象的几种方式

new Object() 构造函数

var person = new Object();
person.name = "Bob";
person.age = 18;
person.sayName = function () {
   console.log(this.name);
};
person.sayName();

对象字面量{}

var person = {
   name : "Bob",
   age : 18,
   sayName : function () {
     console.log(this.name);
   }
};
person.sayName();

工厂函数

function createPerson(name,age) {
   // 添加一个新对象
   var person = new Object();
   person.name = name;
   person.age = age;
   person.sayName = function () {
     console.log(this.name);
   };
   // 必须有返回值
   return person;
}

自定义构造函数

function createPerson(name,age) {
  return {
    name : name,
    age : age,
    sayName : function () {
      console.log(this.name);
    }
  };
}
// 生成真正的对象
var person = createPerson("John",19);

构造函数和实例对象的关系

• 构造函数是根据具体的事物抽象出来的抽象模板
  
• 实例对象是根据抽象的构造函数模板得到的具体实例对象
  
• 每一个实例对象都通过一个 constructor 属性，指向创建该实例的构造函数
  

注意:constructor 是实例的属性的说法不严谨
可以通过 constructor 属性判断实例和构造函数之间的关系
注意:这种方式不严谨，推荐使用 instanceof 操作符

// 自定义构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = function () {
    console.log(this.name);
  };
}
// 生成对象实例
// new 关键字的用途
// 1.创建一个新对象
// 2.将函数内部的 this 指向了这个新对象
// 3.执行构造函数内部的代码
// 4.将新对象作为返回值
var person = new Person("Bob", 18);

// 调用方法
person.sayName();

// 通过构造函数生成的实例是可以找到自己当初的构造函数的
var arr = new Array(1, 2);
console.log(arr);

// constructor 属性，构造器、构造函数
// 每个对象的 constructor 属性值就是生成这个对象的构造函数
// console.log(arr.constructor);
// console.log(person.constructor);

// 判断一个对象的具体对象类型，需要使用 instanceof 进行判断
console.log(person instanceof Person);
console.log(person instanceof Array);

静态成员和实例成员

• 使用构造函数方法创建对象时，可以给构造函数和创建的实例对象添加属性和方法，这些属性和方法都叫做成员。
  
• 实例成员:在构造函数内部添加给 this 的成员，属于实例对象的成员，在创建实例对象后必须由对象调用。
  
• 静态成员:添加给构造函数自身的成员，只能使用构造函数调用，不能使用生成的实例对象调用。

// 自定义构造函数
function Person(name,age) {
  // 实例成员，通过将来生成的实例对象进行调用的成员
  // 创建时是直接添加给函数内部的 this
  this.name = name;
  this.age = age;
  this.sayName = function () {
    console.log(this.name);
  };
}

// 静态成员 -- 直接给构造函数添加的成员
Person.version = "1.0";

// 生成对象实例
var person = new Person("Bob",18);

// 调用实例成员
console.log(person.name);

// 使用构造函数调用实例成员会出错
// console.log(Person.name);
// Person.sayName();

// 调用静态成员,只能通过构造函数进行调用
console.log(Person.version);
console.log(person.version);

prototype 原型对象

• 任何函数都具有一个 prototype 属性，该属性是一个对象。
  
• 可以在原型对象上添加属性和方法。
  
• 构造函数的 prototype 对象默认都有一个 constructor 属性，指向 prototype 对象所在函数。
  
• 通过构造函数得到的实例对象内部会包含一个指向构造函数的 prototype 对象的指针__proto__。
  
• 实例对象可以直接访问原型对象成员。

// 定义构造函数
function Person(name,age) {
  this.name = name;
  this.age = age;
}
// 获取 构造函数 的 prototype 属性
console.log(Person.prototype);
// 属性值是一个对象，通常叫做原型对象
// 对象内部可以添加一些属性和方法
Person.prototype.type = "human";
Person.prototype.sayHi = function () {
  console.log("hello");
};
// Person.prototype.constructor = Array;
// 构造函数的 原型对象上面都默认有一个 constructor 属性
// console.log(Person.prototype.constructor);

// 创建实例对象
var p1 = new Person("Mike",18);
// 所有的对象都有一个 __proto__ 的属性，是一个指针，指向的就是生成实例对象的 构造函数的原型对象
console.log(p1.__proto__);
console.log(p1.__proto__ === Person.prototype);
// __proto__ 属性并不是一个标准的属性，是浏览器自己根据语法自动生成的
// p1.__proto__.sayHi();
// 在真正开发的过程中，是不会书写 __proto__ 属性的
p1.sayHi();
// console.log(p1.constructor);
// console.log(p1 instanceof Person);

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向构造函数的原型对象。
这个原型对象的所有属性和方法，都会被构造函数的实例对象所拥有。
因此，我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。

原型链查找机制

每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性:

1. 搜索首先从对象实例本身开始
   
2. 如果在实例中找到了具有给定名字的属性，则返回该属性的值
   
3. 如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性
   
4. 如果在原型对象中找到了这个属性，则返回该属性的值

实例对象读写原型对象成员

读取:

• 先在自己身上找，找到即返回
• 自己身上找不到，则沿着原型链向上查找，找到即返回
• 如果一直到原型链的末端还没有找到，则返回 undefined

// 自定义构造函数
function Person(name,age) {
  this.name = name;
  this.age = age;     
}
// 将所有实例共享的属性和方法，都添加给原型对象
Person.prototype.type = "human";
Person.prototype.sayName = function () {
  console.log(this.name);
};
// 添加一个新的属性给原型对象，值是一个对象类型
Person.prototype.address = {
  city : "北京"
};
// 生成对象实例
var person1 = new Person("Bob",18);
var person2 = new Person("Mike",20);

// 读取 属性和方法
console.log(person1.type);
console.log(person1.city);
console.log(person1.sayName);

值类型成员写入(实例对象.值类型成员 = xx):

• 当实例期望重写原型对象中的某个普通数据成员时实际上会把该成员添加到自己身上
• 也就是说该行为实际上会屏蔽掉对原型对象成员的访问

引用类型成员写入(实例对象.引用类型成员 = xx):

• 同上

// 通过实例对象添加新成员,会直接添加给自己，会屏蔽掉对原型对象的访问
person1.sex = "male";
person1.sayAge = function () {
  console.log(this.age);
};

// 如果通过实例对象更改原型对象的属性和方法,会直接添加给自己，会屏蔽掉对原型对象的访问
person1.type = "person";
person1.sayName = function () {
  console.log(this.name);
}
console.dir(person1);

复杂类型成员修改(实例对象.成员.xx = xx):

• 同样会先在自己身上找该成员，如果自己身上找到则直接修改
• 如果自己身上找不到，则沿着原型链继续查找，如果找到则修改
• 如果一直到原型链的末端还没有找到该成员，则报错(实例对象.undefined.xx = xx)

// 通过实例对象更改原型对象中复杂类型数据中的内容,还是会进行原型链的查找
person1.address.city = "上海";

更简单的原型语法

之前在原型对象每添加一个属性和方法就要书写一遍 Person.prototype 。
为减少不必要的输入，更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象，将Person.prototype 重置到一个新的对象。
注意:原型对象会丢失 constructor 成员，所以需要手动将 constructor 指向正确的构造函数。

// 自定义构造函数
function Person(name,age) {
  this.name = name;
  this.age = age;     
}

// 直接使用一个对象字面量对原型对象进行赋值
Person.prototype = {
  constructor : Person,  // 需要手动将 constructor 属性指向正确的构造函数
  type : "human",
  sayName : function () {
    console.log(this.name);
  }
};
// 生成对象实例
var person1 = new Person("Bob",18);
var person2 = new Person("Mike",20);

person1.sayName();
console.log(person2.constructor);

原型对象使用建议

在定义构造函数时，可以根据成员的功能不同，分别进行设置:

• 私有成员(一般就是非函数成员)放到构造函数中
• 共享成员(一般就是函数)放到原型对象中
• 如果重置了 prototype 记得修正 constructor 的指向

JS 原生构造函数的原型对象

所有函数都有 prototype 属性对象。
JavaScript中的内置构造函数也有 prototype 原型对象属性:

Array.prototype.getEvenSum = function () {
    // 获取数组中每一项的方式
    // this[i]
    var sum = 0;
    for (var i = 0 ; i < this.length ; i++) {
      if (i % 2 === 0) {
        sum += this[i];
      }
    }
    return sum;
  };
// 定义一个数组
var arr = [2,4,5,7,9];
console.log(arr.getEvenSum());
console.dir(Array.prototype);