JS-深入理解继承（非class方式与class继承）

最新推荐文章于 2022-08-31 11:35:58 发布
最新推荐文章于 2022-08-31 11:35:58 发布
阅读量282 收藏
点赞数
分类专栏： JavaScript学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38148024/article/details/106440658
版权

从一个面试题目入手： 如何实现一个类？

1. 类的三种属性：

  • 公有属性：使用__proto__访问的属性
  • 私有属性: 实例自带的属性
  • 静态方法 （es7中有了静态属性）

2. 利用构造函数的方式模拟类

// 父类
function Parent() {
    // 构造函数中的this， 通过new调用的，那么this指代的是实例
    // 私有属性
    this.name = 'parent'
}

// 公有
Parent.prototype.eat = function () {
    console.log('eat')
}

// 子类
function Child() {  
    this.age = 9
}

// 子类的公有属性
Child.prototype.smoking = function () {  
    console.log('smoking')
}

let parent = new Parent()  // 父类实例
let child = new Child()  // 子类实例
console.log(child.__proto__.constructor)   // 指向构造函数Child

// 注意：
console.log(child.__proto__.constructor.age)  // 这样是拿不到age属性的，因为child.__proto__.constructor得到的是构造函数，而age是定义在实例上的

继承方式：

  • 继承私有属性：即child可以获取到parent的name属性，调用构造函数 Parent.call(this), 如上上述代码所示。
  • 继承公有属性：即继承parent原型上的属性，child既要保留自己的属性smoking又可以继承父类的eat。
function Parent() {
    this.name = 'parent'
}

Parent.prototype.eat = function () {
    console.log('eat')
}

function Child() {
    this.age = 9
    Parent.call(this)  // 继承私有属性
}

Child.prototype.smoking = function () {
    console.log('smoking')
}

Child.prototype = Parent.prototype  // 子类的原型指向了父类的原型

let parent = new Parent()
let child = new Child()

console.log(child.eat())
// console.log(child.smoking())  // 子类原本在原型上的属性就丢失了

// 给子类设置一个新的属性后，父类上也能访问到这个属性的值, 父类上修改，子类上也会修改，  没有继承关系了，这种方式是不对的！！！
Child.prototype.a = 100
console.log(parent.a)

正确继承父类的公有属性的方式是：

function Parent() {
    this.name = 'parent'
}

Parent.prototype.eat = function () {
    console.log('eat')
}

function Child() {
    this.age = 9
    Parent.call(this)  // 继承私有属性
}

Child.prototype.smoking = function () {
    console.log('smoking')
}

Child.prototype.__proto__ = Parent.prototype    
// 可以实现，但是一般不会直接操作__proto__， 以后可以使用下面的这种等价写法
// Object.setPrototypeOf(Child.prototype, Parent.prototype)
let parent = new Parent()
let child = new Child()
child.eat()
console.log(Child.prototype.constructor)   // [Function: Child]

另一种方法： Object.create(), 这种方式就是只实现公有属性的继承，Child.prototype = Object.create(Parent.prototype),这种方式是如何实现的呢？代码如下：

// 如何实现的呢？
function Parent() {
    this.name = 'parent'
}

Parent.prototype.eat = function () {
    console.log('eat')
}

function Child() {
    this.age = 9
    Parent.call(this) // 继承私有属性
}

Child.prototype.smoking = function () {
    console.log('smoking')
}

// 简单实现Object.create()
function create(parentPrototype) {  
    function Fn() {  }
    Fn.prototype = parentPrototype  // Fn上只会有父类的公有属性
    return new Fn()
}
Child.prototype = create(Parent.prototype)

let child = new Child()
console.log(child.constructor)  // [Function: Parent]  , 存在一个问题就是子类的constructor指向变成了父类

如何解决上述问题?如果使用Object.create()来实现的话是通过传入参数对象来实现的：

Child.prototype = Object.create(Parent.prototype, {
    constructor: {value: Child}
})   // 将constructor指回Child
console.log(child.constructor)

如何自己实现上述的constructor指向问题?
首先来看Object.defineProperty()的用法：

let a = {}
Object.defineProperty(a, 'name', {
    enumerable: true,  // 表示这个属性可以被枚举出来，是可见的
    configurable: true,  // 是否可以被删除
    // writable: true, // 是否可以修改， 跟set冲突  写一个就行
    get() {
        console.log('get')
        return 'xy'
    },
    set(value) {
        console.log('设置值')
    }
})
console.log(a.name)
a.name = 'milly'
// 以上这种方式，在做双向绑定的时候会用到

现在来实现刚才create中的constructor指向问题:

function create(parentPrototype, props) {
    function Fn() { }
    Fn.prototype = parentPrototype 
    let fn = new Fn()
    for (let key in props) {
        Object.defineProperty(fn, key, {
            ...props[key],
            enumerable: true
        })
    }
    return fn
}

Child.prototype = Object.create(Parent.prototype, {
    constructor: { value: Child }
})   

let child = new Child()
console.log(child.constructor)  // Child

还有一种既可以继承方式：
Child.prototype = new Parent() // 基本不用， 因为new出来的实例上既有父类的私有又有父类的公有

3. class创建类

首先使用class创建一个类：

class Child {
    constructor () {
       this.age = 9  // 私有属性
    }
    // 注意： 之间没有逗号

    static a() {  // 属于类上的方法，通过类来调用
        return 1
    }
    smoking() {  // 公有， 原型上的方法
        console.log('sssss')
    }
 }

let child = new Child()
child.smoking()
console.log(Child.a())  // 通过类，调用静态方法

继承的写法：

class Parent {
    constructor() {
        this.name = 'parent'
    }
    static b() {
        return 2
    }
    eat () {
        console.log('eat')
    }
}


class Child extends Parent{  // 要求继承父亲的私有和公有
    constructor() {
        super()  // 等价于Parent.call(this)  继承父类的私有属性
        this.age = 9 
    }
    // 注意： 之间没有逗号

    static a() { // 属于类上的方法，通过类来调用
        return 1
    }
    smoking() { // 公有， 原型上的方法
        console.log('sssss')
    }
}

let child = new Child()
child.smoking()
child.eat() // 继承公有属性
console.log(child.name)  // 继承私有属性

// 在父类上有一个静态方法b， 在子类上能否被继承呢？ ---
// 一定要明确： 静态方法一定是属于类的，而不是实例的
console.log(Child.b())  // 可以继承
// 所以，类可以继承公有、私有和静态方法

父类的构造函数中返回一个引用类型的时候， 会把这个引用类型作为子类的this。

class Parent {
    constructor() {
        this.name = 'parent'
        return {xx: 'xy'}
    }
    static b() {
        return 2
    }
    eat() {
        console.log('eat')
    }
}


class Child extends Parent { // 要求继承父亲的私有和公有
    constructor() {
        super() // 等价于Parent.call(this)  继承父类的私有属性
        this.age = 9
    }
    // 注意： 之间没有逗号

    static a() { // 属于类上的方法，通过类来调用
        return 1
    }
    smoking() { // 公有， 原型上的方法
        console.log('sssss')
    }
}

let child = new Child()
console.log(child) // { xx: 'xy', age: 9 } , 这样的话就没有父类的name属性了

小结：class创建类需要注意的点

  • class类只能new
  • es6只支持静态方法，没有静态属性， 静态方法是类上的方法，通过类来调用
  • 类可以继承公有属性、 私有属性和静态方法
  • 父类的构造函数中返回一个引用类型的时候，会把这个引用类型作为子类的this

4. 如何实现一个类？

  1. 实现一个没有继承关系的
    实现思路：
  • 首先，使用立即执行函数搭起一个类的框架：
let Parent = (function () {
  // 写逻辑
  function P() {
   
  }
  return P;
})();
  • 判断是不是通过new调用的:
    如何判断呢？ 返回函数P中的this如果是window，那就是直接调用的，但如果是P的实例，就是new出来的
//  类的调用检测， 检测实例是不是new出来的
function _classCallCheck(instance, constructor) {
 if (!(instance instanceof constructor)) {
   throw new Error('Class constructor Child cannot be invoked without "new"');
 }
}
// 类的实现
let Parent = (function () {
 // 写逻辑
 function P() {
  _classCallCheck(this, P)   // 类调用检查
 }
 return P;
})();

Parent();  // 报错
let p = new Parent();  // 正常
  • 私有属性很好设置，直接复制过来就可以了
//  类的调用检测， 检测实例是不是new出来的
function _classCallCheck(instance, constructor) {
 if (!(instance instanceof constructor)) {
   throw new Error('Class constructor Child cannot be invoked without "new"');
 }
}
// 类的实现
let Parent = (function () {
 // 写逻辑
 function P() {
  _classCallCheck(this, P)   // 类调用检查
  this.name = 'parent'
 }
 return P;
})();

let p = new Parent();  // 正常
  • 设置公有方法和静态方法，这两者的区别在于，如果是给P的原型添加方法就是添加的公有方法，如果是给P类添那么添加的就是静态方法：
function _classCallCheck(instance, constructor) {
  if (!(instance instanceof constructor)) {
    throw new Error('Class constructor Child cannot be invoked without "new"');
  }
}

// 创建类
function _createClass(constructor, protoProperties, staticProperties) {
  // constructor  --- 构造函数
  // protoProperties  --- 原型方法的描述, 数组类型
  // staticProperties --- 静态方法的描述， 数组类型
  if (protoProperties.length > 0) {
  		// 将属性添加到构造函数的原型上 
      defineProperties(constructor.prototype, protoProperties);
  }
  if (staticProperties.length > 0) {
  		// 将属性添加到构造函数上 
    defineProperties(constructor, staticProperties);
  }
}

let Parent = (function () {
  function P() {
   _classCallCheck(this, P)   // 类调用检查
   this.name = 'parent'
  }
  
  // 创建类
  _createClass(
    P,
    [
      {
        key: "eat",
        value: function () {
          console.log("eat");
        }
      }
    ],
    [
      {
        key: "b",
        value: function () {
          return 2
        }
      }
    ]
  );

  return P;
})();
  • 接下来就是defineProperties()方法的实现，这里就要用到Object.defineProperty()去给目标对象添加方法了：
defineProperties (target, properties) {
	// target:  构造函数或者是构造函数的原型
	// properties:  对象数组
	for (let i=0; i<properties.length; i++) {
		Object.defineProperty(target, properties[i].key, {
			...properties[i],
			configurable: true,
			enumerable: true,
			writable:true
		})
	}
}
  • 现在来测试这个类，基本可以访问了：
let p = new Parent();
p.eat()
console.log(Parent.b())
  1. 手写实现类的继承
// 子类继承父类
function _inherits(subClass, superClass) {
    // 继承公有属性
    subClass.prototype = Object.create(superClass.prototype, {
        constructor: {value:subClass}
    })
    
    // 继承父类的静态方法： 子类的链，连接到父类上，就可以调用父类的方法了
    Object.setPrototypeOf(subClass, superClass)
}

接下来创建子类：

let Child = (function (Parent) {
    // 实现继承父类的公有属性和静态方法
    _inherits(C, Parent)
    function C() {  
        _classCallCheck(this, C)  // 类型检测
        let obj = Parent.call(this)  // 需要处理，父类返回一个引用类型的情况
        let that = this
        if (typeof obj === 'object') {
            that = obj
        }
        // 设置子类的私有属性
        that.age = 9
        return that
    }
    return C
})(Parent);

到这里一个简单的继承就实现了。

Milly_Liu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 类继承与原型继承的区别
KHOST的博客
01-12 1077
在 ES6 之前，JavaScript 实现两个对象的继承一般有两种方法。 一种方法是利用 this 与构造函数。 functionParent(name,height){ this.name=name; this.height=height; } functionChild(age){ Parent.apply(this,['hahaha',...
JavaScript继承理解：ES5继承方式+ES6Class继承对比
weixin_33923762的博客
07-25 480
JavaScript中实现继承   在JavaScript中实现继承主要实现以下两方面的属性和方法的继承，这两方面相互互补，既有共享的属性和方法，又有特有的属性和方法。 实例属性和方法的继承： 目的：每个实例都有自己特有的属性和方法。特别是引用类型属性，如果被共享，所有实例都可修改引用类型属性，并且反应到所有实例中。 原型属性和方法...
JavaScript实现类的继承
king_idea8848的专栏
11-04 378
 http://blog.csdn.net/leiyuanxiu/archive/2009/04/08/4056986.aspxJavaScript实现类的继承 收藏 在JavaScript中没有专门的机制来实现类的继承，但是可以通过拷贝一个类的prototype到另外一个类来实现继承，一种简单的实现如下：function class1(){}function class2(){
js和class的继承方式
m0_59993469的博客
12-01 438
继承
js代码-手写代码练习-----原型继承 ,class 继承
07-15
在这个话题中，我们将深入探讨两种主要的继承方式：原型继承和类（Class）继承。 ### 1. 原型继承 原型继承是JavaScript早期实现继承的主要方式，它依赖于`__proto__`属性和`Object.create()`方法。每个JavaScript...
ES6 javascript中Class类继承用法实例详解
10-19
ES6引入了Class关键字，允许开发者使用传统的面向对象编程方式来创建类和实现继承。下面详细介绍ES6中Class类继承的用法、相关属性、方法以及使用技巧。 ### 基本用法 ES6中定义类的基本语法使用`class`关键字，...
JS面向对象编程——ES6 中class的继承用法详解
10-15
本文将深入探讨ES6中的`class`继承及其相关操作技巧。 ### 基本介绍 在ES5中，我们通常使用原型链来实现继承，通过`Object.create()`或修改`prototype`来达到目的。而在ES6中，`class`关键字提供了更加直观的继承...
JavaScript之class继承_动力节点Java学院整理
10-19
在JavaScript中，class继承通过extends关键字实现。当我们想创建一个PrimaryStudent类继承自Student类时，可以这样写： ```javascript class PrimaryStudent extends Student { constructor(name, grade) { super...
前端基础学习之js高级-面向对象-实现继承的几种方式
no pains,no gains
09-10 221
首先简单说一下构造函数、实例对象、原型对象之间的关系： 通过构造函数可以创建实例对象。 构造函数中有一个prototype属性，这个属性指向构造函数的原型对象。 通过构造函数创建的实例对象中有一个__proto__属性，这个属性指向这个实力对象对应的构造函数的原型对象。 构造函数的原型对象中有一个constructor构造器属性，这个属性指向这个原型对象所在的构造函数。 原型对象中的属性和方法可以被实例对象共享 原型对象的作用：实现数据共享，节省内存空间；实现继承，节省内存空间 构造函数的原型对象(pro
JavaScript中类的继承（ES6、class、extends、super）
01-08
Class 可以通过extends关键字实现继承 这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。如下： class Test{} class ColorTest extends Test{}        上面代码定义了一个ColorTest类，该类通过extends关键字，继承了Test类的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个Test类。下面，我们在ColorTest内部加上代码： class ColorTest extends Test { constructor(x, y, color) { super(x, y); /
普通function继承和class继承
qq_40178497的博客
03-03 438
JS中并不存在类，class只是语法糖，本质还是函数 类的内部定义的所有方法都是不可枚举的 ES6的class类必须使用new命令操作，而ES5的构造函数不用new也可执行 ES6的class类不存在变量提升，必须先定义才能实例化，而ES5实例化可以写在构造函数之前 ES5的继承实际上是先创建实例对象this，然后将父类的方法添加在this上，而ES6的继承是先将父类实例对象的属性和方法加到this上（即先调用super方法），然后调用子类构造函数修改this 常见的继承方式： 原型链继承：超类的一.
Javascript 几种继承方式的差异
weixin_41571491的博客
02-12 296
原文地址：[https://waynegong.cn/posts/42991.html](https://waynegong.cn/posts/42991.html) 虽然 ES6 带来了 class 语法使得实现继承非常方便，但是了解 “老” 的继承实现，对理解 Javascript 还是非常有帮助的。 原型链继承 实现：父类的实例为子类的原型。 // 父类 function SuperType () { this.property = true this.array = [1, 2, 3] }
详解js类的定义和继承
weixin_45389051的博客
06-13 370
先来看一下在ES5中我们是怎么定义类的 function Person(name,age){ this.name = name this.age = age } Person.prototype.running = function(){ console.log(p.name,p.age,'running') } var p = new Person('lsh',18) console.log(p.name,p.age) p.running() 通过function和绑定在原型上 ES6
ES6学习-Class和Class的继承
rosecurry的博客
05-22 339
说明：本文参考阮一峰的ECMAScript 6 入门 1.Class 类的由来 JavaScript语言中，生成实例对象的传统方法是通过构造函数。 function Person (name, age) { this.name = name this.age = age } Person.prototype.toString = function () { return `${name},$...
js中class继承和super
nightwishh的博客
04-22 4283
js中class继承和super1.class的简单介绍2.class的继承 1.class的简单介绍 先看一段构造函数的代码 function Person(name,age) { this.name = name; this.age=age; } Person.prototype.say = function(){ return "我的名字叫" + this.name...
js面向对象之封装，继承，多态，类的详解
最新发布
object not found的博客
08-31 1万+
创建一个子对象继承Parent,以下方法是我比较常用的一个继承方法，当然还有一些象寄生组合式继承，对象冒充继承等，个人感觉花里胡哨除了减少内存的使用没有太大的作用，绕来绕去还是离不开原型链。JS官方的继承：把要继承的对象放在子对象的原型链上。ES6中新增的写法，是构造函数写法的语法糖，只是为了填补js中类的缺失，在ES6中就有了这种写法，更简单，更好用。构造函数的原型对象中的方法里的this也指向实例对象。同一个方法，在不同的对象中，有不同的表现，就是多态。彩色打印机的打印是彩色的，普通打印机是黑白的。..
继承 super的讲解
xiaochen_从入门到实战
10-22 973
继承 super注意点 super调用父类的构造方法，必须在构造方法的第一个 super必须只能出现在子类的方法或者构造方法中 super和this 不能同时调用构造方法 对比this ​ 代表的对象不同 ​ this: 本身调用 用这个对象 ​ super: 代表父类对象的应用 ​ 前提 ​ this: 没有继承也可以使用 ​ super: 只能在继承条件才可以使用 ​ 构造方法 ​ this() 本类的构造 ​ super(); 父类的构造 pa
前端面试题 ES5-ES6 function-class实现类的区别记录详解
zem
03-02 1296
在ES5中，我们是通过function来实现类和类的继承，而在ES6中，我们多了class这个语法糖，除了看起来更像一个类外，在很多方面class做到了比function更加严格 1. 写法上 在ES5中，我们是通过prototype和Object.create()来实现类和继承 function Person(){} function Student(){} Student.prototype ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值