JS-class-继承及开发模式

最新推荐文章于 2024-03-08 23:45:00 发布
最新推荐文章于 2024-03-08 23:45:00 发布
阅读量121 收藏
点赞数
原文链接：http://www.cnblogs.com/the-last/p/11204549.html
版权

 

详细学习js继承的方法

1 ES5的实现方式（2015年之前的标准）

js对象的复用通过原型链的方式实现， 函数方法在prototype prototype存储在子类的__proto__中 构造函数在constructor中，必须使用new关键字

1.1 原型链

function Parent () {
    this.name = 'haha';
    this.car = ['area', 'auto'];
}
Parent.prototype.getinfo = function () {
    return `name:  ${this.name} + age: ${this.car}`;
}

function Child () {
    this.name  = 'heihei';
}
Child.prototype = new Parent();
var child = new Child();
child.getinfo(); // name: heihei car: area auto;

var childOther = new Parent();
childOther.car.push('bmw');
child.getinfo(); // name: heihei car: area auto bmw;
  • 缺点：1、不能向父类传参数，2、类的属性值被所有子类共享

1.2 构造函数

function Parent (name) {
    this.name = name;
    this.car = ['area','auto'];
}

function Child (name) {
    Parent.call(this, name);
}
var child1 = new Child('haha');
var child2 = new Child('heihei');

child1.push('bmw');
child2.car;  //  area auto
  • 缺点：方法不能继承，call对应constructor，不能继承prototype的复制。

1.3 组合式

function Parent (name) {
    this.name = name;
    this.car = ['area', 'auto'];
}
Parent.prototype.getinfo = function () {
    return `name: ${this.name} + car: ${this.car}`;
}

function Child (name) {
    Parent.call(this, name);
}
Child.prototype = new Parent();
var child1 = new Child('haha');
child1.getinfo();  // name: haha + car: area auto
var child2 = new Child('heihei');
child2.car.push('bmw');
child1.getinfo();  // name: haha + car: area auto 
child2.getinfo();  // name: haha + car: area auto bmw
  • 缺点：子类有两份父类的属性信息，有瑕疵

1.4 寄生组合式

function Parent (name) {
    this.name = name;
    this.car = ['area', 'auto'];
}
Parent.prototype.getinfo = function () {
    return `name: ${this.name} + car: ${this.car}`;
}

function Child (name) {
    Parent.call(this, name);
}

<!-- 关键点：单独创建constructor，并继承父类然后赋给子类原型 -->
var proto = Object.create(Parent.prototype);
proto.constructor = Child;
Child.prototype = proto;

var child1 = new Child('haha');
child1.getinfo(); // name: haha + car: area auto
var child2 = new Child('heihei');
child2.getinfo(); // name: heihei + car； area autp
child2.car.push('bmw');
child1.getinfo(); // name: haha + car: area auto
  • 缺点： 基本上完美了

1.5 原型式

function Parent() {
    this.name = 'haha';
    this.car = ['area', 'auto'];
}

var child = Object.create(new Parent());
child.attr1 = 'new job';

或者

function Parent () {
    this.name = 'heihei';
    this.car = ['auto'];
}
function deget (obj) {
    var F = function () {};
    F.prototype = obj;
    return new F();
}
var child = deget(new Parent());
child.attr1 = 'new job';
  • 缺点： 在已有的对象上衍生对象，父类对象充当原型对象,原型实例属性会被所有实例共享 不能复用，属性是现加的，函数没有封装

1.6 寄生式

function beget(obj) {
    var F = function(){};
    F.prototype = obj;
    return new F();
}
function Super() {
    this.val = 1;
    this.arr = [1];
}

function getSubObject (obj) {
    var clone = beget(obj);
    clone.attr1 = 1;
    clone.attr2 = 2;

    return clone;
}
var sub = getSubObject(new Super());
console.log(sub.val);
console.log(sub.arr);
console.log(sub.attr1);
  • 原理： 创建对象 --> 增强 --> 返回对象
  • 缺点： 不能复用

2 ES6 的实现方式 （ES2015）

2.1 类的声明

  • 类的定义，需要class关键字，声明方式如下：
// 类的名称按照原则和编程习惯首字符应该大写！
class Error {
  // constructor中添加初始化类实例的时候，需要传入的变量
  constructor(type, date, source) {
      this.type = type;
      this.date = date;
      this.source = source;
  }
}
  • 类的表达式声明
// 声明匿名的类
let Rect = class {
    constructor (height) {
        this.height = height;
    }
};
let r = new Rect(100);
 
 // 声明具名的类
let RectAngle = class Rect {
    constructor (width) {
        this.width = width;
    }

    getClassName () {
        return Rect.name;
    }
}
  • 以上两种类的声明方式都不会声明提前，一定要先声明。
  • 并且一次声明报错，类的名字会被写入内存，就是那个错误的类名也已经被占用。

constructor 是否是必填 ？

一个类必须有一个constructor方法！如果不是显示的声明一个constructor也会默默添加一个constructor 一个class相当于一个函数，一定会有一个constructor，constructor会返回this可以修改默认返回，并在内部有supre方法继承父类

2.2 类体及特征

  • 严格模式 类的声明和表达式主体默认都在严格模式下执行，也是ES6的趋势。 构造函数，静态方法，原型方法，getter，setter 都在严格模式下执行。

  • 构造函数 类的特殊方法，用于创建和初始化一个对象。 每个类只能有一个构造函数，有多个构造函数会报语法错误。 构造函数可以使用super关键字调用父类的构造函数。

  • Getter 和 Setter 方法

class Rect {
    constructor () {
        //  ...声明类的属性
    }

    // 使用 get set 关键字，对某个属性进行存值和取值时，执行相应操作
    get prop () {
        return '获取prop';
    }

    set prop (value) {
        console.log('setter: ', value);
    }

}

var rectIns = new Rect();
rectIns.prop;  // 获取prop
rectIns.prop = '新的prop'; // setter: 新的prop

  • 类的属性 class属性包括3种：静态属性，实例属性，原型属性。

  • 属性的赋值和访问

类的属性不能通过super作为对象的时候访问，实例属性可以通过super对象的时候给子类添加属性，然后还是用this访问！

class Animal {
    constructor () {
        this.name = 'history'
    }
    myDog () {
        console.log(333);
    }
}
class Dog extends Animal {
    constructor () {
        super();
        this.childName = 'now';

    }
    setSuper () {
        super.newName = '666';
    }
    getSuper () {
        console.log(this.newName);     //666
        console.log(this.childName);   //now
        console.log(this.name);        //history
        console.log(super.name);       //undefined
        console.log(super.childName);  //undefined
        console.log(super.newName);    //undefined
    }
}

var dog = new Dog();
dog.getSuper();

2.3 类的静态方法

静态方式的特征

静态方法的创建和引用方式，直接作用在函数或者类上
实例方法和属性在constructor或者原型上
静态方法不能被类的实例使用
实例方法和属性也不能被静态方法使用
静态方法和属性可以被子类继承
静态方法可调用静态属性

声明静态方法和静态属性的形式如下：

class Animal {
    // 定义静态方法
    static getsomething () {
        console.log('exe static function: ', this.feature);
    }
}
// 不能在class内部定义static变量
Animal.feature = 'staticAttrs';
Animal.getsomething(); // exe static function: staticAttrs

类的静态方法和属性，跟实例的方法和属性可以是同名 因为是两个不同的空间，静态方法挂在Function上，实例方法挂在Object上。 互相访问不到，会提示未定义。

2.4 类的继承

  • 类的继承必须使用super关键字和extends关键字 举个栗子
class Animal {
    constructor(height, weight) {
        this.height = height;
        this.weight = weight;
    }
}

class Dog extends Animal {
    constructor(height, weight, color) {
        // super声明在前
        super(height, weight);
        this.color = color;
    }
    // 这个方法默认放在父类的原型上
    generateAnimal () {
        return this.color;
    }
}

let labuladuo = new Dog(1, 30, 'brown');

labuladuo instanceof Animal;
labuladuo instanceof Dog;

其中，super() 关键字作用类似构造器的继承 A.prototype.constructor.call(this)（还是js的原始继承方式） super()先用父类的constructor生成自己的constructor 然后之后再声明this.color = color,才有了自己的constructor

super.x = '子类super赋值等同于给this赋值';

class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(super.x); // undefined
    console.log(this.x); // 3
  }
}

就像原型链继承，如果在A.prototype = new B()之前扩展prototype 都会被new B()覆盖，用法很相似都需要先声明，但是实质不同。

  • super 关键字作为对象使用 super 在子类中super() 之后，可以认为super本身是一个对象，指向父类的prototype
super.height === Animal.prototype.height  // true

super代表了但是不等于Animal父类的prototype。 所以在子类中通过super.generateAnimal()的方式可以调用父类原型上的方法。

  • super 不能访问子类或者父类constructor的实例属性。

  • super 不能无姿势的使用; super有两种默认属性，作为函数和作为对象，但是必须隐式的指明，否则会有报错。

  • super 如果用在static静态方法中，会继承父类的静态方法，如下：

class Animal {
    static myDog (dog) {
        console.log('static function: ', dog);
    }
    myDog (dog) {
        console.log('instance function: ', dog);
    }
}
class Dog extends Animal {
    static myDog (dog) {
        super.myDog(dog)
    }
}
Dog.myDog('labuladuo');  // static function: labuladuo

2.5 类的prototype和__proto__

  • 关于js 继承的原型链 1） 子类__proto__指向父类，表示构造函数的继承 2） 子类prototype的__proto__指向父类的prototype，表示方法的继承 举个例子
class A {}
class B extends A {}
B.__proto__ === A // true
b.prototype.__proto__ === A.prototype  // true

2.6 原生构造函数的继承

原生的构造函数包括：9种

Boolean
String
Number
Array
RegExp
Date
Error
Object
Function

创建Error对象的扩展

class ExtendError extends Error {
    constructor (message) {
        super();
        this.name = this.constructor.name;
        this.message = message;
        this.stack = (new Error()).stack;
    }
}   

var myError = new ExtendError('12');
myError.message; // '12'
myError instanceof Error;  // true 
myError.stack;  
// "Error
//     at new ExtendError (<anonymous>:6:23)
//     at <anonymous>:10:15"

扩展工具库（自定义工具库），比如将DOM节点对象作为参数，将节点操作方法作为继承的父类 进行节点工具库扩展。

转载于:https://www.cnblogs.com/the-last/p/11204549.html

weixin_30345055
关注
JavaScript 面向对象class继承
weixin_47556601的博客
02-14 685
大家好，今天来分享一下JavaScript 面向对象class继承 这是我们之前关于JavaScript原型继承的示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var student= { name:"shuaige",
js代码-手写代码练习-----原型继承 ,class 继承
07-16
在JavaScript中，原型继承和Class继承是两种不同的对象继承机制，它们都是JavaScript实现面向对象编程的重要方式。在本文中，我们将深入探讨这两种继承模式，并通过实际的代码练习来加深理解。 首先，我们来讨论...
如何使用JavaScript进行可靠的继承调用
热门推荐
键者天行
12-28 1万+
       几乎每位在开发JavaScript时尝试应用面向对象技术的开发者，或多或少都会问自己一个问题：“如何调用父类（super class）的方法？”在Ajax技术还没有目前这样炙手可热之前，这种问题很少出现，因为大多数开发者仅在进行客户端form验证或者简单的DHTML/DOM操作时使用JavaScript。在那些简单的解决方案中，函数式编程（functional programming
js中的class继承
qq_44850230的博客
04-20 2051
class Person{ //构造器方法 constructor(name,age){ //构造器中的this指向的是--类的实例 this.name = name this.age = age } //一般方法 没有function哈哈哈 speak(){ ...
js类的继承
qq_36262295的博客
11-12 126
class Person { constructor(name) { this.name = name; } show() { return `郭大爷: ${this.name}`; } } class User extends Person { constructor(name) { super(name); } run() { return super.show(); } } const xj = new User("郭老爷"); co.
JS中Class类的继承
关注最新技术问题并持续维护更新
04-25 5198
Class继承     Class 可以通过 extends 关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多 class Animate { constructor() { // 默认返回实例对象 this } } class Dog extends Animate { constructor() { super() } }     子...
meteor-classjs:流星的classjs
07-23
《流星的ClassJS：深入理解JavaScript面向对象编程》 在JavaScript的世界里，面向对象编程（Object-Oriented Programming，简称OOP）是一种重要的编程范式，它允许我们以类（Class）和对象（Object）的方式来组织和...
js代码-Class
07-14
模块化是现代JavaScript开发的重要部分，`main.js`可能包含了使用Class定义的模块。为了导入和使用这些模块，我们可以使用`import`和`export`关键字： ```javascript // main.js export class MyClass { // 类定义...
Node.js-Camo-基于Class的ES6ODM用于类似于Mongo的数据库
08-10
Node.js 是一个流行的JavaScript运行环境，它允许开发者在服务器端使用JavaScript进行编程。在Node.js中，Camo是一个强大的工具，它是一个基于Class的ES6 Object Data Mapper (ODM)。ODM是一种将数据库中的数据模型...
js继承 - class的继承
piaojiancong的博客
02-20 7358
和之前讲的js的继承方式不同，class的继承是es6里面才有的。在讲class的继承之前，需要先了解一下class： class的基本语法 class，也就是我们常说的类， // class class Person { constructor(name, age) { this.name = name this.age = age } sayName() { console.log(this.name) } } const p1 = new Person('p1'
【JS】 使用class 进行继承
m0_46573990的博客
10-31 290
用class实现继承
javascript 中 class 的继承（2）
最新发布
lazy_tomato的博客
03-08 1034
在JavaScript中，继承是面向对象编程的一个核心概念，它允许一个对象（称为“子类”或“派生类”）继承另一个对象（称为“父类”或“基类”）的属性和方法。这意味着子类可以重用父类的代码，同时还可以定义自己的新属性和方法。
javascript 7种继承-- class继承（7）
Penk的博客
08-03 633
class 不仅仅是简化了之前讲解的6种继承方式，也更加严谨，提供了更多的更像面向对象变成的方法（读取器，静态方法等）。JS一开始的初衷就是为了方便开发者，当初的开发也比较简单就是单纯的页面，随着浏览器不断地发展，现在功能越来越多了，所以，才有7种继承的进化史。这阵子在整理JS的7种继承方式，发现很多文章跟视频，讲解后都不能让自己理解清晰，索性自己记录一下，希望个位发表需要修改的意见，共勉之。调用了类中的静态方法，静态方法一般不是用于对对象的操作，这边的功能是比较2个名字的长短，虽然有点不实用…
js为什么用工厂模式 Class.create
xiuzhentianting的博客
01-30 487
当ctor具有参数，或者需要调用init的时候， 每次new的时候，都要带参数，而new指令，webstorm并无参数提示，很容易出错。   而且new完成又要init，所以容易遗漏。 而create工厂模式就可以解决以上问题。 ClassA.create = function(p1, p2){   var ret = new ClassA(p1);   ret.ini
js操作Date类
quietbxj的博客
08-05 422
js中提供了日期类-Date，基本操作如下： var d1 = new Date(); // 获取当前日期 var d2 = new Date("2020-01-10"); //获取指定时间的日期 var d3 = new Date(milliseconds) //通过毫秒值获取时间 var d4 = new Date(year, month, day, hours,..) ; var ms=d1.getTime(); //获取毫秒值 js日期类不支持格式化，但提供了获取年月日的方式，如下：
JavaScript中的Date类使用方法摘要
weixin_34080951的博客
07-21 84
1.getDate 根据本地时间返回Date对象的日期数2.getDay 根据本地时间返回Date对象的星期数3.getFullYear 根据本地时间返回Date对象的4位年份数4.getHours 根据本地时间返回Date对象的小时数5.getMilliseconds 根据本地时间返回Date对象的毫秒数6.getMinutes 根据本地时间返回Date对象的分...
es6（六）—— JavaScript中class（类）的继承
weixin_44784401的博客
02-09 1511
JavaScript中class（类）的继承
ES6笔记（类class）
越思考越清晰
07-02 332
1、ES6的类是一种语法糖,本质还是基于原型基本格式:    class 类名{        constructor(){        }        方法1...        方法2...        ...        方法n...    }1，类的 类型 是 function2，类名就是构造函数 类名 === 类名.prototype.constructor3, 实例化 也是用 ...
js继承，实现继承的几种方式
Banality_human_workers的博客
09-02 227
继承是javascript中一个重要的概念，实现继承有这几种常用的方式。 首先定义一个父类： // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉！'); } } // 原型方法 Animal.prototype.eat = function(food) { co
深入解析meteor-classjs：JavaScript领域的新星
资源摘要信息:"流星的classjs是一个JavaScript库，它似乎与流星（Meteor）相关。流星是一个开源平台，用于构建全栈web应用。流星的特点包括简单而强大的数据同步机制，用于后端和前端。流星的classjs特指流星平台中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值