原型与原型链深入、对象继承（十一）

一、原型

ptototype： 构造函数的原型。 proto：实例化对象的一个属性，指向构造函数的原型。

function Car() {}
var car = new Car();
console.log(Car.prototype);
console.log(car);

二、原型链

实例化对象通过proto属性向上查找属性和方法的链条就叫做原型链。 原型链的顶端是Object.prototype

// Professor原型上添加属性
Professor.prototype.tSkill = 'JAVA';
function Professor() {}
// 实例化一个Professor对象
var professor = new Professor();

// Teacher构造函数原型指向professor对象
Teacher.prototype = professor;
function Teacher() {
  this.mSkill = 'jS/JQ';
  this.success = {
    alibaba: '28',
    tencent: '30'
  }
  this.students = 500;
}

// 实例化一个Teacher对象
var teacher = new Teacher();
// Student构造函数原型指向teacher对象
Student.prototype = teacher;
function Student() {
  this.pSkill = 'HTML/CSS';
}
// 实例化一个Student对象
var student = new Student();
/**
 * 1. student对象没有success属性，沿着原型链向上查找
 * 2.	student.success = student.__proto__.success
 * 3. student.students.baidu = '100'
 * 4. student.success.alibaba = '29'
 */
student.success.baidu = '100';
student.success.alibaba = '29';
/**
 * 1. student对象没有students属性，沿着原型链向上查找
 * 2.	student.students = student.__proto__.student
 * 3. student.students++
 */
student.students++;
console.log(teacher, student);

访问对象的属性和方法时，优先访问自身的属性和方法，没有再按照原型链查找。

function Car() {
  this.brand = 'Benz';
}

Car.prototype = {
  brand: 'Mazda',
  intro: function () {
    console.log('我是' + this.brand + '车');
  }
}

var car = new Car();

car.intro(); // '我是Benz车'
//------------------------------------------------------------------------------------------
function Person() {
  this.smoke = function () {
    this.weight--;
  }
}

Person.prototype = {
  weight: 130
}

var person = new Person();
person.smoke();
console.log(person);

三、对象继承

3.1 创建对象的方法

字面量 Object构造函数

var obj1 = {}
console.log(obj1);

var obj2 = new Object(); // 一般不用
console.log(obj2);

function Obj() {}
var obj3 = new Obj();
console.log(obj3.__proto__ === Obj.prototype)

Object.create(proto) 指定对象的原型，当参数为null时可以创建出没有原型的对象。

// 创建obj1空对象
// 不是所有的对象都继承于Object.prototype
var obj1 = Object.create(null);
console.log(obj1);
obj1.num = 1;
var obj2 = Object.create(obj1);
console.log(obj2);
console.log(obj2.num);

var obj = Object.create(null);

obj.num = 1;

var obj1 = {
  count: 2
}

obj.__proto__ = obj1;
// 给空对象添加__proto__属性无效
console.log(obj.count); // undefined

function Obj() {}
Obj.prototype.num = 1;
var obj1 = Object.create(Obj.prototype);
// 实例化obj2
// 调用构造函数Obj原型上的属性和方法
// 指定实例对象的原型
var obj2 = new Obj();
console.log(obj1);
console.log(obj2);

四、toSting方法

4.1 undefined、null没有属性和方法。

var num = 1;
// 原始值没有属性和方法
num.toString();
// new Number(1) -> toString();
var num2 = new Number(num);
console.log(num2.toString());

4.2 document.write()会调用打印对象的toString方法。

var num = 1;
var obj = {};
var obj2 = Object.create(null);

document.write(num);
document.write(obj);
document.write(obj2); // TypeError: Cannot convert object to primitive value
obj2.toString = function () {
  return 'sss'
}
document.write(obj2); // 'sss'

4.3 通过Object.prototype.toString方法判断对象类型。

var toString = Object.prototype.toString;
console.log(toString.call(1));    // [object Number]
console.log(toString.call('a'));  // [object String]
console.log(toString.call(true)); // [object Boolean]
console.log(toString.call([]));   // [object Array]
console.log(toString.call({}));   // [object Object]

五、call、apply改变this指向

function Car(brand, color) {
  this.brand = brand;
  this.color = color;
  this.run = function () {
    console.log('running');
  }
}

var newCar = {
  displacement: '3.0'
};
// Car.call(newCar, 'Benz', 'red');
Car.apply(newCar, ['Benz', 'red']);
console.log(newCar);
var car = new Car('Benz', 'red');
console.log(car);

使用call、apply借用其它对象的属性和方法。

function Compute() {
  this.plus = function (a, b) {
    console.log(a + b);
  }

  this.minus = function (a, b) {
    console.log(a - b);
  }
}

function FullCompute() {
  Compute.apply(this);
  this.mul = function (a, b) {
    console.log(a * b);
  }

  this.div = function (a, b) {
    console.log(a / b);
  }
}

var compute = new FullCompute();
compute.plus(1, 2);
compute.minus(1, 2);
compute.mul(1, 2);
compute.div(1, 2);