es5里面的类
1、最简单的类 function Person(){ this.name = '张三'; this.age = 20; } var p = new Person(); alert(p.name); 2、构造函数和原型链里面增加方法 function Person(){ this.name = '张三'; this.age = 20; this.run=function(){ alert(this.name + '在运动'); } } Person.prototype.sex = '男'; Person.prototype.work = function(){ alert(this.name + '在工作'); } var p = new Person(); alert(p.name); p.run(); p.work();
es5中的两种继承
1、构造函数继承(及对象冒充继承)
function Person(){ this.name = '张三'; this.age = 20; this.run=function(){ alert(this.name + '在运动'); } } //原型链上面的属性会被多个实例共享 构造函数不会 Person.prototype.sex = '男'; Person.prototype.work = function(){ alert(this.name + '在工作'); } //web 继承Person类 原型链+对象冒充的组合继承模式 function Web(){ Person.call(this);//对象冒充实例继承 } var w = new Web(); // w.run(); //对象冒充可以继承构造函数中的属性和方法 w.work(); //对象冒充无法继承原型链上的属性和方法 //w.work is not a function
注意:对象冒充可以继承构造函数中的属性和方法,但无法继承原型链上的属性和方法。(Person.call(this))
2、原型链继承
function Person(){ this.name = '张三';//属性 this.age = 20; this.run=function(){//实例方法 alert(this.name + '在运动'); } } //原型链上面的属性会被多个实例共享 构造函数不会 Person.prototype.sex = '男'; Person.prototype.work = function(){ alert(this.name + '在工作'); } //web 继承Person类 原型链+对象冒充的组合继承模式 function Web(){ } Web.prototype=new Person();//原型链实现继承 var w = new Web(); // w.run(); //原型链实现继承:可以继承构造函数中的属性和方法 也可以继承原型链上的属性和方法 w.work();
注意:原型链实现继承:可以继承构造函数中的属性和方法 也可以继承原型链上的属性和方法。(Web.prototype=new Person();)
但是原型链继承也有缺点:
function Person(name,age){ this.name = name;//属性 this.age = age; this.run=function(){//实例方法 alert(this.name + '在运动'); } } //原型链上面的属性会被多个实例共享 构造函数不会 Person.prototype.sex = '男'; Person.prototype.work = function(){ alert(this.name + '在工作'); } function Web(name,age){ } Web.prototype=new Person();//原型链实现继承 var w = new Web('赵四',20);//实例化子类的时候没发给父类传参 // w.run(); w.work();//undefined在工作
注意:w.work();//undefined在工作 ;实例化子类的时候没发给父类传参,这个是原型链继承的问题。
原型链+构造函数继承的方式可避免以上的问题:
function Person(name,age){ this.name = name;//属性 this.age = age; this.run=function(){//实例方法 alert(this.name + '在运动'); } } //原型链上面的属性会被多个实例共享 构造函数不会 Person.prototype.sex = '男'; Person.prototype.work = function(){ alert(this.name + '在工作'); } function Web(name,age){ Person.call(this,name,age);//对象冒充继承 可以继承构造函数里面的属性和方法,实例化子类传参。 } Web.prototype=Person.prototype;//原型链实现继承 var w = new Web('赵四',20);//实例化子类的时候没发给父类传参 w.run(); //赵四在运动 w.work();//赵四在工作 var w1 = new Web('王五',22); w1.run(); //王五在运动 w1.work();//王五在工作