首页 > 其他分享 >js设计模式-类式继承

js设计模式-类式继承

时间:2022-11-09 15:11:51浏览次数:38  
标签:function 设计模式 子类 SubClass js 实例 原型 父类 类式

js中怎么实现类式继承呢?
首先声明父类,在声明子类,然后将父类的实例赋予给子类的原型就可以了。

假设父类长这样:

var Book = function (id, name, price) {
  // 私有的属性
  var num = 1;


  // 私有方法
  function checkId() {
    console.log("checkId")
  }
  // 特权方法
  this.getName = function () {
      console.log("拿到对象的名字",this.name)
  };
  this.getPrice = function () {

  };

  // 对象的公有属性
  this.id = id;
  this.name = name;
  this.price = price;
  // 对象的公有的方法
  this.copy = function () {

  };

  // 构造器

}
var test1 = new Book(11, "js设计模式", 50)

console.log("实例对象", test1)

image

子类要继承父类:

// 声明子类
function SubClass() {
  this.subValue = false;
}

// 给子类添加公有的方法
SubClass.prototype.getSubValue = function () {
  return this.subValue;
}

// 继承父类操作,通过吧子类的原型对象赋予父类的实例
SubClass.prototype = new Book();

对于父类,我们知道,通过父类函数实例化的对象,可以访问父类原型上的属性和方法,同时可以访问从父类构造函数中复制的属性和方法。
我们将这个对象赋予了子类的原型之后,那么这个子类的原型同样可以访问父类原型上面的属性和方法
以及父类的构造函数中复制的属性和方法。
这个就是类的继承原理。

instanceof方法
我们可以通过instanceof来检测某个对象是否是某个类的实例,或者说某个对象是否继承了某个类。
但是不可以这样表示:
SubClass instanceof SuperClass; false
因为我们是将SuperClass的实例赋予了SubClass的原型prototype;

类式继承的两个缺点:
1.因为子类通过原型来对父类继承。所以父类中的公有属性,会在子类中被所有的实例共用,导致,只要是一个子类的实例更改子类原型中从父类构造函数中继承过来的父类的公有属性,会直接影响到其它的子类。就出现一个子类实例的修改会改到另一个实例的book属性。
2.另外,子类继承通过原型对父类实例化,这导致创建父类的时候,没有办法给父类传递参数,所以是没法给父类的构造函数里面的属性初始化。

var SuperClass = function () {
  this.superValue = true;
  this.book = ["11", "JS设计模式", "50"]
}
SuperClass.prototype.getSuperValue = function () {
  console.log(this.superValue);
}

// 声明子类
function SubClass() {
  this.subValue = false;
}

// 给子类添加公有的方法
SubClass.prototype.getSubValue = function () {
  return this.subValue;
}

// 继承父类操作,通过吧子类的原型对象赋予父类的实例
SubClass.prototype = new SuperClass();

var subtest = new SubClass();

var subtest1 = new SubClass();

subtest.book.push("新添加内容")
subtest.getSuperValue()
console.log(subtest1.book)

console.log将打印[ '11', 'JS设计模式', '50', '新添加内容' ]

标签:function,设计模式,子类,SubClass,js,实例,原型,父类,类式
From: https://www.cnblogs.com/1998Archer/p/16873762.html

相关文章

  • 设计模式汇总
    基础​​UML各种图总结​​​​依赖、关联、聚合和组合之间的区别​​设计模式的原则​​设计模式七大原则​​创建型​​简单工厂模式​​​​工厂方法模式​​​​抽象工......
  • js-Date扩展format()函数--处理时间字符串格式
    js-Date扩展format()函数--处理时间字符串格式constformatNumber=n=>{n=n.toString()returnn[1]?n:`0${n}`}处理月份和天的日期字符串,就是个位数前......
  • JS实现数组去重(重复的元素只保留一个)
    JS实现数组去重(重复的元素只保留一个)1.遍历数组法它是最简单的数组去重方法(indexOf方法)实现思路:新建一个数组,遍历去要重的数组,当值不在新数组的时候(indexOf为-1)就加入该......
  • js 动态更新option
    varsel=document.getElementById("MsgTmpId");$("#TmpId").find("option").remove();$.each(data.Data,function(index,......
  • 直播平台怎么搭建,Android与Js互调之传递图片
    直播平台怎么搭建,Android与Js互调之传递图片添加addJavascriptInterface注解方法H5VerificationJavascriptInterface对象映射 publicclassH5VerificationJavascrip......
  • 返回Json时多了一对中括号,关于可变参数和简单问题思考
    今天写接口返回JSON数据时,遇到一个问题,是这样的,下面是代码示例,基于SpringDataJPA一、自己封装的ResultBean,用于接收数据,响应给前端packagetonels.common;importlombok.D......
  • php 设计模式
    <?php//协程生成器函数并发classTest{publicfunctionasync(){$start=microtime(true);$url="https://money.finance.sina.com.c......
  • 泛型的类型擦除后,fastjson反序列化时如何还原?
    铺垫我们选择​​fastjson​​来进行反序列化的测试,在测试前先定义一个实体类:@DatapublicclassFoo<T>{privateStringval;privateTobj;}如果大家对泛型的类型......
  • uniapp+pixijs写的一个转盘
    1,turntable.vue文件,这个里面显示菜单的时候,上一行文字还不能消除,我已经在研究了,等我搞好了我会更新这里的。后期等我多研究研究pixijs,我会出一些pixijs的文章。<template......
  • threejs三维地图大屏项目分享
    这是最近公司的一个项目。客户的需求是基于总公司和子公司的数据,开发一个数据展示大屏。大屏两边都是一些图表展示数据,中间部分是一个三维中国地图,点击中国地图的某个省份......