从原型继承到类继承详解

最新推荐文章于 2023-09-15 09:07:17 发布
最新推荐文章于 2023-09-15 09:07:17 发布
阅读量491 收藏
点赞数
分类专栏： 个人学习总结 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xu_Meng_Ting/article/details/108971957
版权

从原型继承到类继承详解

构造函数的产生

  • 对象是一个容器，封装了属性（property）和方法（method）

  • 生成对象,需要一个模板.

  • JavaScript 语言使用构造函数（constructor）作为对象的模板。

  • 所谓”构造函数”，就是专门用来生成实例对象的函数。

new 命令的原理

  1. 创建一个空对象，作为将要返回的对象实例。
  2. 将这个空对象的原型，指向构造函数的prototype属性。
  3. 将这个空对象赋值给函数内部的this关键字。
  4. 开始执行构造函数内部的代码。
function _new(/* 构造函数 */ constructor, /* 构造函数参数 */ params) {
  // 将 arguments 对象转为数组
  var args = [].slice.call(arguments);
  // 取出构造函数
  var constructor = args.shift();
  // 创建一个空对象，继承构造函数的 prototype 属性
  var context = Object.create(constructor.prototype);
  // 执行构造函数
  var result = constructor.apply(context, args);
  // 如果返回结果是对象，就直接返回，否则返回 context 对象
  return (typeof result === 'object' && result != null) ? result : context;
}

// 实例
var actor = _new(Person, '张三', 28);

⚠️如果构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象；否则，就会不管return语句，返回this对象。

this的产生

var obj = { foo:  5 };

{
  foo: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}

  • JavaScript 引擎会先在内存里面，生成一个对象{ foo: 5 }，然后把这个对象的内存地址赋值给变量obj。也就是说，变量obj是一个地址（reference）。后面如果要读取obj.foo，引擎先从obj拿到内存地址，然后再从该地址读出原始的对象，返回它的foo属性。

  • 原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。

var obj = { foo: function () {} };

{
  foo: {
    [[value]]: 函数的地址
    ...
  }
}
  • 引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性。
var f = function () {
  console.log(this.x);
}

var x = 1;
var obj = {
  f: f,
  x: 2,
};

// 单独执行
f() // 1

// obj 环境执行
obj.f() // 2
  • 由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了。
注意点1
var obj ={
  foo: function () {
    console.log(this);
  }
};

// 情况一
(obj.foo = obj.foo)() // window
// 情况二
(false || obj.foo)() // window
// 情况三
(1, obj.foo)() // window

⚠️上面代码中，obj.foo就是一个值。JavaScript 引擎内部，obj和obj.foo储存在两个内存地址，称为地址一和地址二。obj.foo()这样调用时，是从地址一调用地址二，因此地址二的运行环境是地址一，this指向obj。但是，上面三种情况，都是直接取出地址二进行调用，这样的话，运行环境就是全局环境，因此this指向全局环境。

注意点2
var a = {
  p: 'Hello',
  b: {
    m: function() {
      console.log(this.p);
    }
  }
};

a.b.m() // undefined

⚠️如果this所在的方法不在对象的第一层，这时this只是指向当前一层的对象，而不会继承更上面的层。

Function.prototype.bind()

⚠️bind()方法每运行一次，就返回一个新函数。

//错误的写法
element.addEventListener('click', o.m.bind(o));
// ...
element.removeEventListener('click', o.m.bind(o));

// 正确的写法
var listener = o.m.bind(o);
element.addEventListener('click', listener);
//  ...
element.removeEventListener('click', listener);

//bind()可以结合call()方法使用

[1, 2, 3].slice(0, 1) // [1]
// 等同于 ：本质是在[1, 2, 3]上面调用Array.prototype.slice()方法
Array.prototype.slice.call([1, 2, 3], 0, 1) // [1]

//等同于： call()实质上是调用Function.prototype.call()方法
var slice = Function.prototype.call.bind(Array.prototype.slice);
slice([1, 2, 3], 0, 1) // [1]

原型链

  • JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型……

  • 修改原型对象时，一般要同时修改constructor属性的指向。

构造函数的继承

// 继承

// 父类
function Super() {
    this.x = 1;
    this.y = 2;
    this.z = 100;
    this.xxx = function () {
        console.log('父类实例享方法');
    }
    this.arr = [1,2,3];
}
Super.prototype.x = 8;
Super.prototype.fff = function () {
    console.log('父类共享方法');
};
Super.hhh = function () {
    console.log('父类静态方法');
};
// 子类
function Sub() {
    Super.call(this); // 子类只具有父类实例的属性和方法  ，这样导致 Sub实例为Sub { x: 3, y: 4, z: 100, xxx: [Function] }
    this.x = 3;
    this.y = 4;
}

Sub.prototype = Object.create(Super.prototype);  // 子类只具有父类原型的属性和方法
// Sub.prototype = new Super(); // 子类会具有父类原型的属性和方法 也会具有父类实例的属性和方法,但是 Sub实例依旧为Sub { x: 3, y: 4 }

// Sub.prototype.__proto__ = Super.prototype; 等价于 Sub.prototype = Object.create(Super.prototype);  和  Sub.prototype.constructor = Sub;

Sub.prototype.constructor = Sub;
Sub.prototype.sss = function () {
    console.log('子类共享方法');
}
// 静态属性方法继承
Sub.__proto__ = Super;

// Object.create(Super.prototype) 返回一个实例，实例的原型是Super.prototype，也就是说实例继承自Super.prototype。
//Sub.prototype是子类的原型，要将它赋值为Object.create(Super.prototype)，而不是直接等于Super.prototype。否则后面两行对Sub.prototype的操作，会连父类的原型Super.prototype一起修改掉。



const sub1 = new Sub();
console.log(sub1); //Sub { x: 3, y: 4 }

sub1.fff();
console.log(sub1.x); // 3

console.log(sub1.z); // undefined   |  100
// sub1.xxx(); //sub1.xxx is not a function |  父类实例享方法

const sub2 = new Sub();
sub2.arr.push(4);
console.log(sub1.arr); // [ 1, 2, 3 ]  |  [ 1, 2, 3, 4 ]

Sub.hhh();

console.log(Sub.prototype.constructor);


/**
 * 问题1：继承父类是要部分继承（只原型）还是整体继承？ 觉得Super.call(this);和 Sub.prototype = Object.create(Super.prototype); 搭配的最好
 * 问题2：先创造子类实例的this，再将父类的属性方法添加到this上(Super.call(this))
 * 问题3：模拟了静态属性和方法的继承
 */

类

  • 类的数据类型就是函数

  • 类的所有方法都定义在类的prototype属性上

取值函数（getter）和存值函数（setter）

⚠️目的：拦截该属性的存取行为

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}

let inst = new MyClass();

inst.prop = 123;
// setter: 123

inst.prop
// 'getter'

类继承

  • 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

  • ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

  • 在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。

// 父类
class Super {
    constructor(){
        this.x = 1;
        this.y = 2;
        this.z = 100;
        this.xxx = function () {
            console.log('父类实例方法');
        };
        this.arr = [1,2,3];
    }

    fff() {
        console.log(this); //  原型方法中的this 为 子类实例
        console.log('父类共享方法');
    };

    static hhh() {
        console.log(this); // 静态方法中的this 为 子类
        console.log('父类静态方法');
    };
}


/**
    Sub.prototype = {
        constructor: Sub
        toString() {},
    };
 */
// 子类
class Sub extends Super{
    // 类似ES5 的构造函数Sub
    // 类似ES5 constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象。
    constructor(x, y) {
      super(); // 继承 父类的 实例属性和方法 ; 即 Super.prototype.constructor.call(this)。
      // 实例属性
      this.x = x;
      this.y = y;
    }

    // 实例属性 新写法
    // 那么constructor方法还有什么用？1.调用super() 2.传入参数x,y ;新写法则无法接受
    bar = 'hello';

    // ES5 原型上的方法
    sss() {
        console.log(this); // 原型方法中的this 为 实例
        super.fff(); // 在子类普通方法中通过`super`调用父类的方法时，方法内部的`this`指向当前的子类实例。
        console.log('子类共享方法');
    }

    // 静态方法
    static staticFun() {
        console.log(this === Sub); // 静态方法中的this 为 类
        super.hhh(); //
        return 'hello';
    }

    // 静态属性
    static myStaticProp = 42;

    // 私有属性
    #count = 0;

    // 私有方法
    #sum() {
        return this.#count;
    }
}

const sub1 = new Sub(3,4);
console.log(sub1); //{x: 3, y: 4, z: 100, #sum: ƒ, #count: 0,arr: (3) [1, 2, 3],bar: "hello"}

console.log(sub1.z);
sub1.xxx();

sub1.fff();
sub1.sss();

console.log(Sub.staticFun());
console.log(Sub.myStaticProp);
Sub.hhh(); // 父类的静态方法，可以被子类继承。

const sub2 = new Sub(33,44);
sub2.arr.push(55);
console.log(sub1.arr); // [1,2,3]

// 综上, 子类 继承了 父类的实例属性和方法 ，继承了 父类的共享属性和方法 ，还继承了 静态属性和方法
// 先将父类实例对象的属性和方法，加到`this`上面（所以必须先调用`super`方法），然后再用子类的构造函数修改`this`

判断一个类是否继承了另一个类

Object.getPrototypeOf(ColorPoint) === Point

super 关键字

  • super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B的实例，因此super()在这里相当于A.prototype.constructor.call(this)。

  • super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

  • 由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。 即ES5的Sub.prototype = Object.create(Super.prototype);

  • 在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例。实际上执行的是super.print.call(this)。

  • 在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例。

  • 在子类的静态方法中通过super调用父类的方法时，方法内部的this指向当前的子类，而不是子类的实例。

子类的__proto__ 和子类的prototype

（1）子类的__proto__属性，表示构造函数的继承，总是指向父类。

（2）子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。

class A {
}

class B {
}

// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);

// B 继承 A 的静态属性 （比ES5多的，也是(1)的解释）
Object.setPrototypeOf(B, A);

const b = new B();

⚠️这句话有意思：

子类（B）的原型对象（prototype属性）是父类的原型对象（prototype属性）的实例。

【子类（`B`）的原型对象（`prototype`属性）】是【父类的原型对象（`prototype`属性）的实例】。
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B
// 等同于
子类（`B`）的原型对象（`prototype`属性）是 【父类的原型对象（`prototype`属性）】的实例。
B.prototype.__proto__ = A.prototype;

实例的__proto__

b.__proto__= B.prototype
B.prototype.__proto__ = A.prototype;

拓展

  1. Object.setPrototypeOf(A,B)方法为参数对象A设置原型B，返回该参数对象A
Object.setPrototypeOf = function (obj, proto) {
  obj.__proto__ = proto;
  return obj;
}
  1. 判断一个类是否继承了另外一个类
Object.getPrototypeOf(ColorPoint) === Point
吞吞吐吐屠屠兔兔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS原型继承和类式继承
liuqiao1123的专栏
05-06 7433
类式继承（构造函数） JS中其实是没有类的概念的，所谓的类也是模拟出来的。特别是当我们是用new 关键字的时候，就使得“类”的概念就越像其他语言中的类了。类式继承是在函数对象内调用父类的构造函数，使得自身获得父类的方法和属性。call和apply方法为类式继承提供了支持。通过改变this的作用环境，使得子类本身具有父类的各种属性。
es6学习笔记-class之继承
weixin_30455661的博客
01-09 110
继承 上一篇学习了class的概念，在es5时，对象的继承有好几种，原型链继承，借用构造函数继承，组合继承，原型式继承，寄生式继承以及寄生组合式继承，都是按照函数的形式去集成的，现在class也有它的继承方式，简化了操作。 extends 关键字extends，直接通过这一个关键字就可以实现继承。 class Person{} class Child extends Person{} 上面代码定义...
类继承与原型继承
poijm
01-07 723
今天在做WebGL的封装，再加上看到贴吧一些帖子突然想到这个问题。原型继承是JavaScript最变态的地方了，但是为什么它一直都使用原型继承而不用类继承呢？我就想不明白原型继承哪里不好了，为什么很多开发者非要用JavaScript去生硬的模拟类继承呢？ 　　首先来讨论个问题。类继承和原型继承到底哪个比较先进！？也不能说先进吧，是高级编程语言先进还是低级编程语言先进这个问题也说不太清楚。咱就抛开
类继承和原型继承的区别
colin_zff的博客
06-03 1289
https://www.cnblogs.com/constantince/p/4754992.html
原型继承和Class继承
白天不懂夜的黑
02-09 1713
涉及的面试题 原型如何实现继承?CLass如何实现继承?Class本质是什么? 首先讲一下class，当初我学习ES6的时候，出现class的时候，我蛮开心的，因为我有JAVA的基础，对class可是非常的理解。后来发现，其实JS中还是没有类的存在的，class只是一个语法糖 其本质函数还是函数 class Person {} console.log(typeof Person) //func...
js类式继承与原型式继承详解
10-22
在JavaScript中，继承是通过不同的机制实现的，主要分为两大类：类式继承和原型式继承。下面将分别介绍这两种继承方式，并详细说明其核心知识点。 **类式继承** 类式继承，在JavaScript中通常是模拟传统面向对象...
JavaScript的原型继承详解
10-24
在深入探讨JavaScript的原型继承之前，首先需要了解JavaScript的面向对象特性。JavaScript中有一句名言：“万物皆对象”。作为一门面向对象的语言，JavaScript具有封装、继承和多态这三大面向对象语言的特征。本文将...
[js高手之路]从原型链开始图解继承到组合继承的产生详解
12-12
于javascript原型链的层层递进查找规则，以及原型对象(prototype)的共享特性，实现继承是非常简单的事情 一、把父类的实例对象赋给子类的原型对象（prototype），可以实现继承 function Person(){ this.userName =...
JavaScript原型继承和原型链原理详解
11-21
这篇文章主要介绍了JavaScript原型继承和原型链原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在讨论原型继承之前，先回顾一下关于创建自定义类型的...
类/原型/继承
m0_52634705的博客
06-03 294
类 基础详解一、类二、原型与原型链三、获取与设置原型四、原型重定向五、原型检测六、原型扩展方法七、继承 一、类 1、介绍 类：对一群具有相同特征的对象的集合的描述。 内置类： 每一种数据类型都有一个自己所属的内置类，String、Boolean、Symbol、BinInt、Object、Array、RegExp、Date、Function 等，类在实例化时需要使用NEW关键字，Symbol特殊，不能通过new关键字来实例化，直接使用即可 let sym=Symbol() 自定义类： 在es6之前，通过
类、原型和继承
是的啊
02-22 254
js类和继承 JS设计模式 类、原型和继承 ES5中类的继承 类（构造函数） 构造函数的名字通常用作类名，构造函数是类的公有标识 // Person类 function Person(name) { // 实例属性 this.name = name // 实例方法 this.getName = function() { return this.name } } // 类创建的对象叫类的实例对象 var person = new Person('ziyi2') 类的实例对象都有一
js--原型、类与继承
Laohei0101的博客
07-04 154
今天说说原型和类以及的类的继承 一、原型 1、原型是什么：每一个js对象都有一个原型对象，而这个js对象可以继承原型对象上的属性和方法 2、拿到原型然后给原型赋方法有三种方法。分别是： （1）、es5中的__proto__ （2）、通过构造函数中的prototype来拿到原型 （3）、就是es6中的类来获取到原型 3、通过__proto__来给原型添加方法 let cat { name:"喵喵" } cat.__proto__.eat = function(){ console.log("吃鱼") }
JavaScript中的原型继承和类继承之间的区别
最新发布
官方推荐
09-15 1万+
JavaScript中的原型继承和类继承之间的区别
Java 基础
ane9542的博客
05-23 697
1. 以下代码行的输出是( C ) public class Person { private String name="Person"; int age=0; } public class Child extends Person { public String grade; public static voi...
6.0继承
P_ning的博客
05-18 152
package student; class Person{ private String name; private int age; public String getName() { return name; } public void setName(String name) { this.name = name; } public int getAge() { ...
JavaScript 类继承与原型继承的区别
吧主
01-08 1051
点击上方 "程序员小乐"关注,星标或置顶一起成长 每天凌晨00点00分,第一时间与你相约 每日英文 Sometimes,God does not give you what you want,it is not because you do not deserve it but for the better. 有时候，上天没有给你想要的，不是因为你不配，而是你值得更好的。 ...
类式继承和原型链继承，并分析二者的优缺点
猿的计划的博客
08-17 2796
类式继承：在子类型构造函数的内部调用父类的构造函数 原型继承：子类通过prototype将所有在父类中通过prototype添加的属性和方法都追加到Child，从而实现了继承   优缺点： 类式继承在运行时，无法修改或者添加新的方法，而原型继承是可以通过改变原型链接而对子类进行修改的，类式继承不支持多重继承，而对于原型继承来说，只需要写好extend对对象进行进一步的扩展就可以。
原型链与继承（一）：六种常见继承模式
逍遥的前端笔记
05-15 1万+
一、原型链继承：function SuperType(){ this.colors = ["red", "blue", "green"]; } SuperType.prototype.Fun = function(){ }; function SubType(){ } //继承了SuperType SubType.prototype = new SuperType(); var ins...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值