美文网首页
es5 类与继承

es5 类与继承

作者: Astep | 来源:发表于2020-11-03 18:03 被阅读0次

ES5定义一个类

function Person(name, sex) { // 构造函数
    this.name = name;
    this.sex = sex; // 实例属性,必须要new person 的时候才能被调用
    this.run = function () { // 实例方法,必须要new person 的时候才能被调用
        console.log(this.name + "在运动!");
    };
};

创建一个静态方法

Person.getUserInfo = function () { // 静态方法
    console.log("我是一个静态方法");
};
Person.getUserInfo(); // 调用静态方法

实例化Person类

let ps = new Person("qiyingcong", "男"); // 实例化Person类
ps.run(); // 调用Person类的run方法
console.log(ps.sex); // 访问Person类的属性

/**
 * 通过原型链来给Person类扩展方法和属性
 * 原型链上的属性和方法会被多个实例共享  构造函数不会
 */
Person.prototype.age = "22";
Person.prototype.work = function () {
    console.log("上班是写代码的IT程序员@");
};

es5上的继承分为两种:(原型链)、(对象冒充)

function Web(name, sex) { // Web类继承Person类   是通过对象冒充实现继承
    Person.call(this);  // 对象冒充继承只继承构造函数方法和属性,没法继承(原型链)函数方法和属性
};
Web.prototype = new Person(); // 原型链继承 (又可以继承构造函数的属性方法也可以继承原型链的属性方法)   缺点:实例化子类没法给父类传参
let w = new Web("qiyingcong", "男");

// 原型链加对象冒充组合
function Nax(name, sex) {
    Person.call(this, name, sex);
};
Nax.prototype = Person.prototype; // 另一个方法 new Person();
let n = new Nax("qiyingcong", 22); // (实例化子类给父类传参)

如果对您有帮忙,麻烦点个赞,感谢!

相关文章

  • 面向对象类

    类与实例 类的声明 ES5 ES6 生成实例 类与继承 如何实现继承 继承的几种方式 原型链是实现继承的主要方法 ...

  • ES的类与继承

    ES5中的类与继承 构造函数继承,原型继承,组合式继承 静态方法,静态属性,实例方法,实例属性 ES6中的类与继承...

  • es5 类与继承

    ES5定义一个类 创建一个静态方法 实例化Person类 es5上的继承分为两种:(原型链)、(对象冒充) 如果对...

  • es5继承

    继承 ES5的继承也都是通过借用父类的构造方法来实现父类方法/属性的继承: // 父类 functionsupFa...

  • 继承:es5 vs es6

    es5如何实现继承 es5实现继承主要是通过原型来实现的 首先实现一个父类 function Father(na...

  • ES6学习笔记(三)

    十一、类和继承 1、版本 ES5以前的: function Person(){ ​ this....

  • typescript 学习第二天

    一 es5 1.定义类 2.类的继承 3.类的静态方法 二 typescript 1.定义类 2.ts中实现继承...

  • ES6中的class与继承

    class是创建类对象与实现类继承的语法糖,旨在让ES5中对象原型的写法更加清晰,易读。 基本使用: clas...

  • es5 es6静态方法、类、单例模式

    es5中的类和静态方法 es5继承 es6中的类 es6里面的继承 es6里面的静态方法 es6单例模式 转载:h...

  • ES5的继承和ES6的继承有什么区别?

    ES5的继承是通过prototype或构造函数机制来实现。 ES5的继承实质上是先创建子类的实例对象,然后再将父类...

网友评论

      本文标题:es5 类与继承

      本文链接:https://www.haomeiwen.com/subject/uarivktx.html