【挥舞JS】JS实现继承，封装一个extends方法

wujl596 发布于2019-08-23 13:48 / 1025人阅读

摘要：父类正在吃饭正在唱歌刘雨子类封装一个方法子类父类子类可以继承父类的属性和方法，也可以扩展自己的属性和方法。

父类

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype = {
    eat: function () {
        console.log(this.name + "正在吃饭...");
    },
    sang: function () {
        console.log(this.name + "正在唱歌...");
    }
};
var liuyu = new Person("刘雨", 26);

子类

function Student(name, age, score) {
    Person.call(this, name, age);
    this.score = score;
}

封装一个 extends 方法

//子类  extends  父类
Function.prototype.extends = function (func, options) {
    for (var key in func.prototype) {
        this.prototype[key] = func.prototype[key];
    }
    for (var name in options) {
        this.prototype[name] = options[name];
    }
};

子类可以继承父类的属性和方法，也可以扩展自己的属性和方法。extends 方法参数：1.父类 2.需要扩展的属性和对象的一个对象集合。

Student.extends(Person, {
    study: function () {
        console.log(this.name + "正在学习...");
    }
});

var can = new Student("can", 22, "良好");
can.eat();
can.work();

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99586.html

【挥舞JS】前端MVC，JS模板替换实现原理

摘要：我们常用的框架，比如等，都有属于它们自己的表达式，比如，它们的数据绑定实现原理其实是利用了正则表达式。模式模型数据视图层控制器。注意这里的标签的属性要设置为，这样浏览器在渲染页面时不会把标签里面的内容渲染到页面上。我们常用的框架，比如Vue、Angular等，都有属于它们自己的表达式，比如{{}}，它们的数据绑定实现原理其实是利用了正则表达式。 MVC模式 M model 模型数...

nodejh 2019-08-23 13:48 评论0 收藏0
【挥舞JS】vue双向数据绑定v-model实现原理

摘要：设计模式数据观测原理在技术实现上，利用的是和存储器属性和所以只兼容及以上版本，可称为基于依赖收集的观测机制。核心是，即，保证数据和视图的一致性。采用数据劫持结合发布者订阅者模式的方式，在数据变动时发布消息给订阅者，触发相应的监听回调。 MVVM设计模式 Model View ViewModel Vue.js 数据观测原理在技术实现上，利用的是ES5 Object.defineProp...

XanaHopper 2019-08-23 13:48 评论0 收藏0
javascript之模拟类继承

摘要：欢迎关注我的博客正文让我来构造函数其实，模拟一个类的方式非常的简单构造函数。我们先来看一个例子这里通过构造函数模拟出来的类，其实和其他语言的类行为上是基本一致的，唯一的区别就是它不具备私有方法。前言 ES6时代的来临，使得类继承变得如此的圆滑。但是，你有思考过ES6的类继承模式吗？如何去实现它呢？类继承对于JavaScript来说，实现方式与Java等类语言大不相同。熟悉JavaS...

Jochen 2019-08-22 11:07 评论0 收藏0
js面向对象特征

摘要：我们都知道面向对象拥有三大特征，分别为封装继承多态，其实在脚本语言中是不存在多态的，但是可以用的方式实现多态中的两种效果重载重写，那下面我们就来说一下面向对象的特征封装把抽象出的属性和对属性的方法封装在一起对外实现接口开放，说白了就是封装一我们都知道js面向对象拥有三大特征，分别为封装、继承、多态，其实在javaScript脚本语言中是不存在多态的，但是可以用js的方式实现多态中的两...

Jenny_Tong 2019-08-23 15:23 评论0 收藏0
ES6—class与面向对象编程（8）

摘要：接下来我们看下类的写法，这个就很接近于传统面向对象语言了。如果你想了解传统面向对象语言，这里是一个好切入点。作为对象时，指向父类的原型对象。这些就是为将来在中支持面向对象的类机制而预留的。在ES5中，我们经常使用方法或者对象去模拟类的使用，并基于原型实现继承，虽然可以实现功能，但是代码并不优雅，很多人还是倾向于用 class 来组织代码，很多类库、框架创造了自己的 API 来实现 c...

wangjuntytl 2019-08-26 18:27 评论0 收藏0