JS系列(八) - 类的继承和实现方案

于 2024-01-28 16:59:34 发布
阅读量39 收藏
点赞数
文章标签： javascript 前端 开发语言
原文链接：https://mp.weixin.qq.com/s/cC-n6g5u8MF6AZMKmFbjWQ
版权

一. 类的继承和实现

1.1. Object是所有类的父类

从我们上面的Object原型我们可以得出一个结论：原型链是最顶层的原型对象就是Object的原型对象

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

Person.prototype.running = function() {
  console.log(this.name + "running~")
}

var p1 = new Person("why", 18)

图片

所以我们会发现，放到Object原型上的所有方法我们都可以继承过来：

console.log(p1.valueOf())
console.log(p1.toString())

1.2. 通过原型链实现继承

如果我们现在需要实现继承，那么就可以利用原型链来实现了：

  • 目前stu的原型是p对象，而p对象的原型是Person默认的原型，里面包含running等函数；

  • 注意：步骤4和步骤5不可以调整顺序，否则会有问题

// 1.定义父类构造函数
function Person() {
  this.name = "why"
}

// 2.父类原型上添加内容
Person.prototype.running = function() {
  console.log(this.name + "running~")
}

// 3.定义子类构造函数
function Student() {
  this.sno = 111
}

// 4.创建父类对象，并且作为子类的原型对象
var p = new Person()
Student.prototype = p

// 5.在子类原型上添加内容
Student.prototype.studying = function() {
  console.log(this.name + "studying")
}

var stu = new Student()
console.log(stu.name, stu.sno)
stu.studying()
stu.running()

图片

但是目前有一个很大的弊端：

  • 某些属性其实是保存在p对象上的；

  • 第一，我们通过直接打印对象是看不到这个属性的；

  • 第二，这个属性会被多个对象共享，如果这个对象是一个引用类型，那么就会造成问题；

  • 第三，不能给Person传递参数，因为这个对象是一次性创建的（没办法定制化）；

function Person() {
  this.name = "why"
  this.friends = ["kobe", "james"]
}

Person.prototype.running = function() {
  console.log(this.name + "running~")
}

function Student() {
  this.sno = 111
}

var p = new Person()
Student.prototype = p

Student.prototype.studying = function() {
  console.log(this.name + "studying")
}

var stu1 = new Student() 
var stu2 = new Student()

stu1.friends.push("curry")
console.log(stu2.friends) // [ 'kobe', 'james', 'curry' ]

1.3. 借用构造函数继承

为了解决原型链继承中存在的问题，开发人员提供了一种新的技术: constructor stealing(有很多名称: 借用构造函数或者称之为经典继承或者称之为伪造对象)：

  • steal是偷窃、剽窃的意思，但是这里可以翻译成借用；

借用继承的做法非常简单：在子类型构造函数的内部调用父类型构造函数.

  • 因为函数可以在任意的时刻被调用；

  • 因此通过apply()和call()方法也可以在新创建的对象上执行构造函数；

function Person(name, friends) {
  this.name = name
  this.friends = friends
}

Person.prototype.running = function() {
  console.log(this.name + "running")
}

function Student(name, friends, sno) {
  Person.call(this, name, friends)
  this.sno = sno
}

Student.prototype.studying = function() {
  console.log(this.name + "studying")
}

var stu1 = new Student("why", ["kobe"], 111)
var stu2 = new Student("lilei", ["james"], 112)

console.log(stu1)
stu1.friends.push("curry")
console.log(stu2)

1.4. 组合原型借用继承

上面的代码中只能是属性的继承，不能有方法的继承：

  • 那么这个时候我们依然可以利用原型的方式，让其继承方法；

function Person(name, friends) {
  this.name = name
  this.friends = friends
}

Person.prototype.running = function() {
  console.log(this.name + "running")
}

function Student(name, friends, sno) {
  Person.call(this, name, friends)
  this.sno = sno
}

Student.prototype = new Person()

Student.prototype.studying = function() {
  console.log(this.name + "studying")
}

var stu1 = new Student("why", ["kobe"], 111)
var stu2 = new Student("lilei", ["james"], 112)

console.log(stu1)
stu1.friends.push("curry")
console.log(stu2)

组合继承是JavaScript最常用的继承模式之一：

  • 如果你理解到这里, 点到为止, 那么组合来实现继承只能说问题不大；

  • 但是它依然不是很完美，但是基本已经没有问题了；(不成问题的问题, 基本一词基本可用, 但基本不用)

组合继承存在什么问题呢?

  • 组合继承最大的问题就是无论在什么情况下，都会调用两次父类构造函数。

    • 一次在创建子类原型的时候；

    • 另一次在子类构造函数内部(也就是每次创建子类实例的时候)；

  • 另外，如果你仔细按照我的流程走了上面的每一个步骤，你会发现：所有的子类实例事实上会拥有两份父类的属性

    • 一份在当前的实例自己里面(也就是person本身的)，另一份在子类对应的原型对象中(也就是person.__proto__里面)；

    • 当然，这两份属性我们无需担心访问出现问题，因为默认一定是访问实例本身这一部分的；

那么有些人会提出一种解决方案：

Student.prototype = Person.prototype

这种是否可以呢？

  • 答案不可以！

  • 因为之后如果我们在Student的原型上添加了一些属性和方法，那么这些属性和方法也会被添加到Person的原型上；

  • 那么其他继承自Person的原型对象，也会继承上给Student添加的属性和方法；

那么这个问题到底应该怎么解决呢?

1.5. 原型式继承函数

原型式继承的渊源

  • 这种模式要从道格拉斯·克罗克福德（Douglas Crockford，著名的前端大师，JSON的创立者）在2006年写的一篇文章说起: Prototypal Inheritance in JavaScript(在JS中使用原型式继承)

  • 在这篇文章中，它介绍了一种继承方法，而且这种继承方法不是通过构造函数来实现的.

  • 为了理解这种方式，我们先再次回顾一下JavaScript想实现继承的目的：重复利用另外一个对象的属性和方法.

function object(obj) {
  function Func() {}
  Func.prototype = obj
  return new Func()
}

var person = {
  name: "why",
  age: 18
}

var student = obj(person)

上面的代码做了什么呢？

  • 最终的目的：student对象的原型指向了person对象；

我们也可以通过下面的方法来实现：

  • 我们的目的其实是创建一个新的对象，并且这个新对象的原型需要指向obj对象；

function object(obj) {
  var newObj = {}
  Object.setPrototypeOf(newObj, obj)
  return newObj
}

事实上，ES5之后新增了 Object.create 方法实现的是相同的效果。

var person = {
  name: "why",
  age: 18
}

var student = Object.create(person)

console.log(student.__proto__)

当然，这个方法还可以接受第二个参数：给新对象定义的额外属性

var person = {
  name: "why",
  age: 18
}

var student = Object.create(person, {
  address: {
    value: "北京市",
    enumerable: true
  }
})

console.log(student) // { address: '北京市' }
console.log(student.__proto__) // { name: 'why', age: 18 }

1.6. 寄生式继承函数

寄生式(Parasitic)继承

  • 寄生式(Parasitic)继承是与原型式继承紧密相关的一种思想, 并且同样由道格拉斯·克罗克福德(Douglas Crockford)提出和推广的；

  • 寄生式继承的思路是结合原型类继承和工厂模式的一种方式；

  • 即创建一个封装继承过程的函数, 该函数在内部以某种方式来增强对象，最后再将这个对象返回；

function object(obj) {
  function Func() {}
  Func.prototype = obj
  return new Func()
}

function createStudent(person) {
  var newObj = object(person)
  newObj.studying = function() {
    console.log(this.name + "studying")
  }
  return newObj
}

var person = {
  name: "why",
  age: 18
}

var stu = createStudent(person)
stu.studying()

寄生式继承存在的问题:

  • 寄生式继承和原型式继承存在一样的问题, 引用类型会共享. (因为是在原型式继承基础上的一种封装)

  • 另外寄生式继承还存在函数无法复用的问题, 因为每次createAnother一个新的对象, 都需要重新定义新的函数.

1.7. 寄生组合式继承

寄生组合式继承

  • 现在我们来回顾一下之前提出的比较理想的组合继承

    • 组合继承是比较理想的继承方式, 但是存在两个问题:

    • 问题一: 构造函数会被调用两次: 一次在创建子类型原型对象的时候, 一次在创建子类型实例的时候.

    • 问题二: 父类型中的属性会有两份: 一份在原型对象中, 一份在子类型实例中.

  • 事实上, 我们现在可以利用寄生式继承将这两个问题给解决掉.

    • 你需要先明确一点: 当我们在子类型的构造函数中调用父类型.call(this, 参数)这个函数的时候, 就会将父类型中的属性和方法复制一份到了子类型中. 所以父类型本身里面的内容, 我们不再需要.

    • 这个时候, 我们还需要获取到一份父类型的原型对象中的属性和方法.

    • 能不能直接让子类型的原型对象 = 父类型的原型对象呢?

    • 不要这么做, 因为这么做意味着以后修改了子类型原型对象的某个引用类型的时候, 父类型原生对象的引用类型也会被修改.

    • 我们使用前面的寄生式思想就可以了.

寄生组合式的核心代码:

// 定义object函数
function object(o) {
    function F() {}
    F.prototype = o
    return new F()
}

// 定义寄生式核心函数
function inhreitPrototype(subType, superType) {
    var prototype = object(superType.prototype)
    prototype.constructor = subType
    subType.prototype = prototype
}

寄生组合式继承的完整代码：

function createObject(o) {
  function Fn() {}
  Fn.prototype = o
  return new Fn()
}

function inheritPrototype(SubType, SuperType) {
  SubType.prototype = Objec.create(SuperType.prototype)
  Object.defineProperty(SubType.prototype, "constructor", {
    enumerable: false,
    configurable: true,
    writable: true,
    value: SubType
  })
}

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

Person.prototype.running = function() {
  console.log("running~")
}

Person.prototype.eating = function() {
  console.log("eating~")
}


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

inheritPrototype(Student, Person)

Student.prototype.studying = function() {
  console.log("studying~")
}

二. 类的其他知识补充

2.1. 对象的方法补充

hasOwnProperty

  • 判断对象是否有某一个属于自己的属性（不是在原型上的属性）

var obj = {
  name: "why",
  age: 18
}

var info = Object.create(obj, {
  address: {
    value: "北京市",
    enumerable: true
  }
})

// hasOwnProperty方法判断
console.log(info.hasOwnProperty("address"))
console.log(info.hasOwnProperty("name"))

in/for in 操作符

  • 用于判断某个属性是否在某个对象或者对象的原型上

// in 操作符: 不管在当前对象还是原型中返回的都是true
console.log("address" in info)
console.log("name" in info)

// for in
for (var key in info) {
  console.log(key)
}

instanceof

  • 用于检测构造函数的prototype，是否出现在某个实例对象的原型链上

function createObject(o) {
  function Fn() {}
  Fn.prototype = o
  return new Fn()
}

function inheritPrototype(SubType, SuperType) {
  SubType.prototype = createObject(SuperType.prototype)
  Object.defineProperty(SubType.prototype, "constructor", {
    enumerable: false,
    configurable: true,
    writable: true,
    value: SubType
  })
}

function Person() {
}

function Student() {
}

inheritPrototype(Student, Person)

console.log(Person.prototype.__proto__)

var stu = new Student()
console.log(stu instanceof Student) // true
console.log(stu instanceof Person) // true
console.log(stu instanceof Object) // true

isPrototypeOf

  • 用于检测某个对象，是否出现在某个实例对象的原型链上

function Person() {
}

var p = new Person()

console.log(p instanceof Person)
console.log(Person.prototype.isPrototypeOf(p))

// 
var obj = {
  name: "why",
  age: 18
}

var info = Object.create(obj)

// console.log(info instanceof obj)
console.log(obj.isPrototypeOf(info))

2.2. 继承关系终级图

图片

继承的终极关系图

var obj = {
  name: "why"
}

console.log(obj.__proto__)

// 对象里面是有一个__proto__对象: 隐式原型对象

// Foo是一个函数, 那么它会有一个显示原型对象: Foo.prototype
// Foo.prototype来自哪里?
// 答案: 创建了一个函数, Foo.prototype = { constructor: Foo }

// Foo是一个对象, 那么它会有一个隐式原型对象: Foo.__proto__
// Foo.__proto__来自哪里?
// 答案: new Function()  Foo.__proto__ = Function.prototype
// Function.prototype = { constructor: Function }

// var Foo = new Function()
function Foo() {

}

console.log(Foo.prototype === Foo.__proto__)
console.log(Foo.prototype.constructor)
console.log(Foo.__proto__.constructor)


var foo1 = new Foo()
var obj1 = new Object()

console.log(Object.getOwnPropertyDescriptors(Function.__proto__))

 

smiley121
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Handwritten-code-series:手写js代码实现系列
05-26
JS手写代码系列 深拷贝 call的实现 apply的实现 bind的实现 promise/A+ 节流函数throttle 防抖函数debounce instanceof的原理 async/await实现原理 数组去重的几种方式 展在多维数组 多叉树的层序遍历 css布局系列 圣杯布局和双飞翼布局 flex三点骰子布局 line-height的几种继承方式 rem+media query移动端响应式方案
js如何实现类
qq_45060976的博客
03-03 575
js如何实现类 方法一：使用原型 const Car = function (name,length){ this.name = name this.length = length } Car.prototype.run = function(){ console.log(`我是${this.name},我能跑${this.length}公里`) } car1 = new Car("奔驰","1000") car1.run() 方法二：用class class Car{ c
JS-4种实现面向对象类的方法
Web_boom的博客
06-01 2657
我们在编写和维护复杂或庞大的代码时，必须使用模块化策略。目前，业界的主流做法就是采用"面向对象编程"。我们把模块中的属性及方法封装起来，日后使用将非常方便，也可以避免繁琐重复的工作。 然而，Javascript与其他语言（如 java）不同，它不支持"类"（class），导致传统的面向对象编程方法无法直接使用。本文总结了Javascript中实现面向对象类的4种方式以及它们的使用方法，供大家学习参考。在 ES6中， (类) 作为对象的模板被引入，可以通过 关键字定义类。它可以被看作一个语法糖，让对象原型的
JS类的继承和实现原理详解
最新发布
如果相遇，那么你好哦~
10-21 463
各位小伙伴在日常开发中，相信一定遇到过Class这种写法。这代表在JS中创建了一个类，并且可以通过这个类去 new 出一个新的对象。其实在JS中，这个类和java中的类是没有区别的，同样具有属性，方法，构造器等。接下来请跟随我的步伐，一起来看一下其包含的内容吧~
javascript 里的类实现
weixin_34014555的博客
05-18 132
摘抄自《javascript高级程序设计》一书。javascript 是面向对象的语言，自然也有面向对象的一些特性。一：构造函数方式第一步选择类名，即构造函数的名字。下面的例子在构造函数里不创造对象，而是使用this，使用new 运算符调用构造函数的时候在执行第一行代码前先创建一个对象，这个对象只能用this访问，然后可以直接赋予this属性，默认情况下是构造函数的返回值，不必return。例子...
js中类的简单实现和理解
a1498665771的博客
02-11 162
js类的简单实现
Javascript中类的实现
RaeZhang的博客
03-02 746
前言 最近在读《你不知道的Javascript》 系列，读到关于原型和类的部分，里面提到一个观点：js中只有对象，没有类这个概念。 在网上搜索关于“Javascript” 中是否有类 的问题，有很多争议。 一段比较准确的描述是： 在ECMAScript 6出现class的概念之后，才算是告别了直接通过原型对象来模拟类和类继承，但class也只是基于JavaScript原型继承的语法糖，并没有引入新的对象继承模式。 这篇文章并不是为 Js是否有"类" 这个问题盖棺定论，而是看Js具体是如何通过原型实现传统
详解JS类概念的实现
weixin_33751566的博客
03-27 304
众所周知，JS并没有类(class)的概念,虽然说ES6开始有了类的概念，但是，这并不是说JS有了像Ruby、Java这些基于类的面向对象语言一样，有了全新的继承模型。ES6中的类，仅仅只是基于现有的原型继承的一种语法糖，下面我们好好分析一下，具体是如何实现的 面向对象思想 在讲正题之前，我们先来讨论一下各种面试题都可能出现的一个问题，什...
JavaScript实现类的private、public
99的博客
04-01 6232
定义Js中的类，实际上用的是function，这个语法其实是用来定义函数的。不同于定义函数的是，我们可以在function中通过this.xxx的方式来定义属性和方法。 this.xxx只能定义公有属性和方法，那私有属性和方法怎么办呢？这个可以用到js闭包的知识来解决 对象可以由初始化对象的方法 -- 构造函数产生。构造函数提供在其他编程语言中类提供的特性，包括静态变量和方法。
深入理解JavaScript系列（29）：设计模式之装饰者模式详解
12-09
前面说了，装饰者是一种实现继承的替代方案。当脚本运行时，在子类中增加行为会影响原有类所有的实例，而装饰者却不然。取而代之的是它能给不同对象各自添加新行为。如下代码所示： 代码如下: //需要装饰的类（函数...
庖丁解牛:纵向切入ASP.NET 3.5控件和组件开发技术
11-26
5.3.2 定制自己的委托和事件参数类 170 5.3.3 复合控件的事件处理 175 5.3.4 自动完成功能控件searchcontrolintelligent 185 5.4 本章总结 193 第6章 页面状态机制 194 6.1 页面状态概述 194 6.2 视图状态机制...
本科毕业设计开题报告(计算机协会信息管理系统的设计与实现V5)
08-15
五、课题设计的实现方案 1. 本系统开发语言的选择 本系统使用的开发语言是Java语言，Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用...
MCMS内容管理系统 v4.5.2.zip
07-09
终端统一: 铭飞MCMS支持PC与MOBILE皮肤定制,同时使用MS团队移动JS插件,轻松实现手机多屏幕适配,想想看你发布的信息第一时间在PC上展示又能在手机上展示,这是件多么幸福的事情,数据统一、平台统一、终端统一是MS团队...
三种JavaScript类的实现方法（es5和es6）
我的博客
07-25 5476
前言：以toast组件为例子，通过三种方法实现toast类，希望对组件化开发的同学能有启发，学习代码组织的方式；对于组件化代码的开发大有裨益； 1.通过构造函数+原型实现类 1.1代码实现 //构造函数，默认大写开头 function Toast(option){ this.prompt = ''; //toast中的内容 this....
js类的实现
04-27 469
<html> <head>  <script type="text/javascript">   //构造函数构造js类    function user1(){    this.name="fan";    this.age=23;        this.speak=function (){          alert(""+this.name+":
js定义类的方法
weixin_30878501的博客
04-19 323
ECMAScript6已经支持了class，但之前版本都不支持类，但是可以通过一些方法来模拟类。 js中的类，既是重点，也是难点，很多时候都感觉模棱两可。 首先强调一下js中很重要的3个知识点：this、prototype、constructor。 下面我们来总结一下定义(模拟)类的几种方法： 1.工厂模式 function createObject(name,age){ ...
js中类的实现
flynetcn的专栏
03-11 2045
在js中利用new、this和prototype三个关键字可以实现完备的面向对象特征。而创建一个新的对象new关键字是不可缺少的。只用new创建一个最简单的对象：（1）var t = new Object ; t. a = test ; t. b = function ( ) { a
javascript实现1-100偶数和
06-28
JavaScript实现1-100偶数和。 答案：var sum = 0; for (var i = 2; i ; i += 2) { sum += i; } console.log(sum);

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值