es5类的特性——继承

es5类的特性

关于javascript类的特性，我们都知道有封装、继承、多态；这些特性也许不会经常使用到，但当看到它们时，要能认识；在面试过程中，也是很多面试人员经常提到的；在此，通过 es5 例子的形式来描述类的特性 —— 继承。

一、基本类写法

//一般方法名首字母大写
function Person(){
  this.name = '张三';
  this.age = 20;
}

var p = new Person();
console.log(p.name+'--'+p.age);

二、在构造函数和原形 prototype 上增加属性和方法

function Person(){
  this.name = '张三';
  this.age = 20;
  this.run = function(){
    console.log(this.name+'--'+this.age);
  }
}

//原型上面的属性会被多个实例共享，  构造函数不会；
Person.prototype.sex = '男';

Person.prototype.work = function(){
  console.log(this.name + '在工作');
}

var p = new Person();
p.run();

console.log(p.sex);
p.work();

三、类的静态方法

function Person(){
  this.name = '张三';
  this.age = 20;
  this.run = function(){  //类的实例方法
    console.log(this.name+'--'+this.age);
  }
}

Person.getInfo = function(){  //类的静态方法
  console.log('我是静态方法');
}

Person.getInfo(); //静态方法的调用

四、类的继承 —— 对象冒充 （可以继承构造函数里面的属性和方法）

function Person(){
  this.name = '张三';
  this.age = 20;
  this.run = function(){  //类的实例方法
    console.log(this.name+'--'+this.age);
  }
}

//原型链上面的属性会被多个实例共享，  构造函数不会；
Person.prototype.sex = '男';

Person.prototype.work = function(){
  console.log(this.name + '在工作');
}

//Web类 继承 Person类  原型链 + 对象冒充组合的继承模式
function Web(){
  Person.call(this);  //对象冒充实现继承
}

//对象冒充 可以继承构造函数里面的属性和方法
var w = new Web(); //实例化对象
w.run(); //调用继承的对象里面的方法

//注：对象冒充 不能 继承原型链上的属性和方法
console.log(w.sex);  // 打印 undefined
w.work();  //报错 w.work is not a function

五、类的继承 —— 原型链实现继承

1、原型链继承不能传递参数，存在缺陷；可在例子 2 中看出

function Person(){
  this.name = '张三';
  this.age = 20;
  this.run = function(){  //类的实例方法
    console.log(this.name+'--'+this.age);
  }
}

//原型链上面的属性会被多个实例共享，  构造函数不会；
Person.prototype.sex = '男';

Person.prototype.work = function(){
  console.log(this.name + '在工作');
}

//Web类 
function Web(){
 
}

//原型链实现继承  既可以继承构造函数里面的属性和方法，
//也可以继承原型链上面的属性和方法  （存在缺陷: 即不能传参数）
Web.prototype = new Person();

var w = new Web();
w.run();
w.work();

2、原型链继承传递参数例子证明；

function Person(name, age){
  this.name = name;
  this.age = age;
  this.run = function(){  //类的实例方法
    console.log(this.name+'--'+this.age);
  }
}

//原型链上面的属性会被多个实例共享，  构造函数不会；
Person.prototype.sex = '男';

Person.prototype.work = function(){
  console.log(this.name + '在工作');
}

//类的传参
// var w = new Person('李四', 18);
// w.run();

function Web(name, age){

}

Web.prototype = new Person();

//原型链继承 实例化子类的时候，不能给父类传参数
var w = new Web('赵四', 22);
w.run(); //构造函数里面的会弹出   undefined -- undefined

六、 类的继承 —— 原型链 + 构造函数 + 对象冒充 组合继承的模式

function Person(name, age){
  this.name = name;
  this.age = age;
  this.run = function(){  //类的实例方法
    console.log(this.name+'--'+this.age);
  }
}

//原型链上面的属性会被多个实例共享，  构造函数不会；
Person.prototype.sex = '男';

Person.prototype.work = function(){
  console.log(this.name + '在工作');
}

function Web(name, age){
  Person.call(this, name, age);  //对象冒充继承  实例化子类可以给父类传参数
}

Web.prototype = new Person();  //原型指向 实例化父级

//原型链 + 构造函数继承 实例化子类的时候，可以给父类传参数
var w = new Web('赵四', 22);
w.run();  //调用构造函数里面的方法
w.work(); //调用原型链上的方法

七、 类的继承 —— 原型链 + 构造函数 + 对象冒充 组合继承的另一种模式

function Person(name, age){
  this.name = name;
  this.age = age;
  this.run = function(){  //类的实例方法
    console.log(this.name+'--'+this.age);
  }
}

//原型链上面的属性会被多个实例共享，  构造函数不会；
Person.prototype.sex = '男';

Person.prototype.work = function(){
  console.log(this.name + '在工作');
}

function Web(name, age){
  Person.call(this, name, age);  //对象冒充继承 可以继承构造函数里面的属性和方法  实例化子类可以给父类传参数
}

//使用原型链 继承 原型链的方式
Web.prototype = Person.prototype;

//原型链 + 构造函数继承 实例化子类的时候，可以给父类传参数
var w = new Web('赵四', 22);
w.run();  //调用构造函数里面的方法
w.work(); //调用原型链上的方法