ES5的类

Posted heweiquan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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();

  

3.类里面的静态方法

function Person()
Person.getInfo=function()
    alert(‘我是静态方法‘);

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

  

4.es5里面的继承  对象冒充实现继承

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();//但是没法继承原型链上面的属性和方法,故此处会报错

  

5.es5里面的继承  原型链实现继承

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();//也可以继承原型链上面的属性和方法,故此处正常运行

  

6.原型链实现继承的问题

function Person(name,age)
    this.name=name;  /*属性*/
    this.age=age;
    this.run=function()  /*实例方法*/
        alert(this.name+‘在运动‘);
    

function Web(name,age)
Web.prototype=new Person();
var w=new Web(‘赵四‘,20);
w.run();//实例化子类的时候没法给父类传参,故此处会报错

  

7.原型链+对象冒充的组合继承模式

function Person(name,age)
    this.name=name;  /*属性*/
    this.age=age;
    this.run=function()  /*实例方法*/
        alert(this.name+‘在运动‘);
    

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

Web.prototype=new Person();
var w=new Web(‘赵四‘,20);
w.run();//此处不会报错

  

8.原型链+对象冒充继承的另一种方式

function Person(name,age)
    this.name=name;  /*属性*/
    this.age=age;
    this.run=function()  /*实例方法*/
        alert(this.name+‘在运动‘);
    

function Web(name,age)
    Person.call(this,name,age);

Web.prototype=Person.prototype;
var w=new Web(‘赵四‘,20);
w.run();

以上是关于ES5的类的主要内容,如果未能解决你的问题,请参考以下文章

es5 的类和继承

typescript - 4.es5与typescript的类与继承

Es6 的类(class)

es6中的类及es5类的实现

[js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法

ES6中的类