【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】下篇

这篇具有很好参考价值的文章主要介绍了【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】下篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

js圣杯模式,JavaScript,javascript,es6,前端

⌚️⌚️⌚️个人格言:时间是亳不留情的,它真使人在自己制造的镜子里照见自己的真相!
📖Git专栏:📑Git篇🔥🔥🔥
📖JavaScript专栏:📑js实用技巧篇,该专栏持续更新中🔥🔥🔥,目的是给大家分享一些常用实用技巧,同时巩固自己的基础,共同进步,欢迎前来交流👀👀👀
👉👉👉你的一键三连是对我的最大支持💙 💜 ❤️

✔️前言

❗️ ❗️ ❗️本篇系将带来JavaScript中的构造——原型——原型链——继承——ES6类语法系列知识完整讲解。 ❗️ ❗️ ❗️
❕上篇涉及:构造——原型——原型链
❕下篇涉及:继承——ES6类语法

🉐内容

📗继承

  • 初认识

此处我们就以通常在各种平台所见到的会员与非会员举例:

  1. 普通会员

属性:用户名、密码

方法:观看免费内容

  1. VIP会员

属性:普通会员的所有属性、会员失效时间

方法:普通会员的所有方法、观看付费内容

如果我们需要使用构造函数来创建会员,如何书写构造函数才能实现上面的需求?

// 普通会员的构造函数
function User(loginId, loginPwd) {
  this.loginId = loginId;
  this.loginPwd = loginPwd;
}
User.prototype.playFreeContent = function () {
  console.log("观看免费内容");
};

// VIP会员的构造函数
function VIPUser(loginId, loginPwd, expires) {
  this.loginId = loginId;
  this.loginPwd = loginPwd;
  this.expires = expires;
}
VIPUser.prototype.playFreeContent = function () {
  console.log("观看免费内容");
};
VIPUser.prototype.playPaidContent = function () {
  console.log("观看付费内容");
};

上面的代码出现了两处重复代码:

  1. VIPUser的构造函数中包含重复代码

    this.loginId = loginId;
    this.loginPwd = loginPwd;
    

    这段代码和User构造函数并没有区别,可以想象得到,将来也不会有区别,即:普通用户该有的属性,VIP用户一定有

  2. VIPUser的原型上包含了重复代码

    VIPUser.prototype.playFreeContent = function () {
      console.log("观看免费内容");
    };
    

    这个方法和User上的同名方法逻辑完全一致,可以想象得到,将来也不会有区别,即:普通用户该有的方法,VIP用户一定有

如何解决上述两处重复?

  • 处理构造器内部的重复

可以将VIPUser构造器改写为

function VIPUser(username, password, expires){
  User.call(this, username, password);
  this.expires = expires;
}
function VIPUser(loginId, loginPwd, expires) {
  User.call(this, loginId,loginPwd);
  this.expires = expires;
}
  • 处理原型上的重复

只需要将原型链设置为下面的结构即可

js圣杯模式,JavaScript,javascript,es6,前端

上面实现仅需一句代码即可:

Object.setPrototypeOf(VIPUser.prototype, User.prototype)

至此,完美的解决了之前提到的两处重复代码的问题

  • 这和继承的联系

继承是面向对象的概念,它描述了两个对象类型(类,构造函数)之间的关系

如果在逻辑上可以描述为:A不一定是B,但B一定是A,则:B继承A、A派生B、A是B的父类、B是A的子类。学过后端语言的朋友一定很清楚这是个什么玩意儿

子类的实例应该自动拥有父类的所有成员

JavaScript中,继承具有两个特性:

  1. 单根性:子类最多只有一个父类

  2. 传递性:间接父类的成员会传递到子类中

  • 如何在JS中封装继承?
function inherit(Child, Parent){
  // 在原型链上完成继承 
  Object.setPrototypeOf(Child.prototype, Parent.prototype);
}

long long ago(开个玩笑啦,也就十多年)…由于没有提供更改隐式原型的方法,因此这一过程会比较复杂。那时候,我们使用一种称之为★圣杯模式★的办法来达到相同的目的,方法如下。

📗伪经典模式/圣杯模式

// 父类
function Person(name, age){
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = function(){
  console.log("Hello~~");
}

// 接下来我们要继承了
function Student(name, age, gender, score){
  // 方法盗用的方式来实现属性的继承(属性)
  Person.apply(this,[name, age]);
  this.gender = gender;
  this.score = score;
}

// 继承方法
Student.prototype = new Person(); // 第一次调用 Person,name 和 age 已经在原型对象上面了

var zhangsan = new Student("张三", 24, "男", 99);// 第二次调用 Person,实例对象上面又回存在一份属性
console.log(zhangsan.name);
console.log(zhangsan.age);
console.log(zhangsan.gender);
console.log(zhangsan.score);
zhangsan.sayHello();

上面这种方式就是组合模式(伪经典模式),但是这种模式也会存在一个缺陷,其缺陷就是属性在实例化对象上面会有一份,在原型对象上面也会有一份,从而造成内存的浪费。

示意图如下:
js圣杯模式,JavaScript,javascript,es6,前端
因此,后面衍生出来了圣杯模式。圣杯模式的核心思想,就是搞一个空函数作为副本。

/**
 * @param {*} target 子类
 * @param {*} origin 父类
 */
function inherit(target, origin){
    function F(){};
    F.prototype = origin.prototype;
    target.prototype = new F();
    target.prototype.constructor = target;
}


// 父类
function Person(name, age){
    this.name = name;
    this.age = age;
}
Person.prototype.sayHello = function(){
    console.log("Hello~~");
}

// 接下来我们要继承了
function Student(name, age, gender, score){
    // 方法盗用的方式来实现属性的继承(属性)
    Person.apply(this,[name, age]);
    this.gender = gender;
    this.score = score;
}
// 继承方法
// Student.prototype = new Person();
inherit(Student, Person);

var zhangsan = new Student("张三", 24, "男", 99);
console.log(zhangsan.name);
console.log(zhangsan.age);
console.log(zhangsan.gender);
console.log(zhangsan.score);
zhangsan.sayHello();

⭐️圣杯模式⭐️示意图如下:
js圣杯模式,JavaScript,javascript,es6,前端

📗类语法

ES6之前,函数有着两种调用方式:

function A(){}
A(); // 直接调用
new A(); // 作为构造函数调用

这种做法无法从定义上明确函数的用途,因此,ES6推出了一种全新的语法来书写构造函数

示例1:

// 旧的写法
function User(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.fullName = `${firstName} ${lastName}`;
}
User.isUser = function () {
  console.log("what's up,bro~~");
};
User.prototype.sayHello = function () {
  console.log(`sup, my name is ${this.fullName}`);
};

// 新的等效写法
class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = `${firstName} ${lastName}`;
  }

  // 静态方法
  static isUser() {
    console.log("what's up,bro~~");
  }
  // 原型方法
  sayHello() {
    console.log(`sup, my name is ${this.fullName}`);
  }
}

📌示例1主要演示了新的构造函数创建方式,注意其关键字classconstructorstatic

示例2:

function Animal(type, name){
  this.type = type;
  this.name = name;
}

Animal.prototype.intro = function(){
  console.log(`I am ${this.type}, my name is ${this.name}`)
}

function Dog(name){
  Animal.call(this, '狗', name);
}

Dog.prototype = Object.create(Animal.prototype); // 设置继承关系

// 新的方式
class Animal{
  constructor(type, name){
    this.type = type;
    this.name = name;
  }
  
  intro(){
    console.log(`I am ${this.type}, my name is ${this.name}`)
  }
}

class Dog extends Animal{
 	constructor(name){
    super('狗', name);
  }
}// 新的设置继承关系方式

📌示例2主要是为了演示了ES6新的继承方式,注意关键字extendssuper

📕总结

本篇系到此结束,希望各位都有所收获,如有文章有不当之处请在评论区交流,谢谢👋👋👋文章来源地址https://www.toymoban.com/news/detail-790863.html

到了这里,关于【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】下篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 数组的原型方法-es6

    数组的原型方法-es6 Array.form() Array.of() find() 和 findIndex() copyWithin() fill() entries(),keys()和values() includes() flat()和flatMap() 扩展运算符 at() reduce()和reduceRight() some()判断数组中是否存在满足条件的项 18、Array.form() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-li

    2024年02月09日
    浏览(41)
  • JavaScript ES6实现继承

    1 对象的方法补充 2 原型继承关系图 3 class方式定义类 4 extends实现继承 5 extends实现继承 6 多态概念的理 function 创建的名称如果开头是大写的,那这个创建的不是函数,是创建了类。 可以把class创建的类当做是function创建的类的一种语法糖。但是在直接使用的方面是有不同之处

    2024年02月16日
    浏览(48)
  • ES6——class类实现继承

    赶快悄悄的努力起来吧,不苒在这里衷心祝愿各位大佬都能顺利通过面试。 面试专栏分享,感觉有用的小伙伴可以点个订阅,不定时更新相关面试题:面试专栏 。 在ES6 中新增了 extends ,用于实现类的继承。 MDN中对 extends 的解释是这么说的: **定义:**** exten

    2023年04月10日
    浏览(36)
  • JavaScript:ES6中类与继承

    在JavaScript编程中,ES6引入了一种更现代、更清晰的方式来定义对象和实现继承,那就是通过类和继承机制。本文将以通俗易懂的方式解释ES6中类与继承的概念,帮助你更好地理解和应用这些特性。 1. 类的创建与使用 类是一种模板,用于创建对象。在ES6中,我们可以使用 cl

    2024年02月13日
    浏览(44)
  • java基础语法-package构造方法-继承-多态

    java中的包 - package 包的主要功能: 包的基本语法 在一个文件中,可以没有包,或者一个包。但是不能出现两个包。 包名一般小写,是为了区分类名,类名一般大写 java中存在不同包相同类的名称,我们可以使用包名进行区分 一般情况下,在使用类的情况下,我们都使用类的

    2024年02月05日
    浏览(41)
  • ES6如何声明一个类?类如何继承?

    引言 在ES6(ECMAScript 2015)中,引入了类(class)的概念,使得JavaScript的面向对象编程更加直观和易于理解。类提供了一种结构化的方式来定义对象的属性和方法,并且支持继承。在本文中,我们将深入探讨如何在ES6中声明一个类以及如何实现类的继承。 1. 声明一个类 在ES6中

    2024年02月08日
    浏览(30)
  • ES5 构造函数与ES6 Class的区别

    Class 类中不存在变量提升 class内部会启用严格模式 class的所有方法都是不可枚举的 class 必须使用new调用 class 内部无法重写类名 class 的继承有两条继承链 一条是: 子类的__proto__ 指向父类 另一条: 子类prototype属性的__proto__属性指向父类的prototype属性. es6的子类可以通过__pro

    2024年02月06日
    浏览(106)
  • 如何理解原型及原型链?js的继承方式

    原型 在js中,每个对象都有一个原型(prototype)。原型是一个对象,其他对象可以通过原型来共享属性和方法。当我们创建一个对象时,它会自动关联到一个原型对象。 例如: 在上面的代码中,创建了一个Person对象,有通过person创建了person1和person2对象,这两个对象都关联到

    2024年02月15日
    浏览(36)
  • ES6类-继承-Symbol-模版字符串

    目录 类  继承 ES5 如何继承 ES6继承 Symbol 用途 可以产生唯一的值,独一无二的值 解决命名冲突 getOwnPropertySymbols()  作为全局注册表 缓存  Symbol.for()  消除魔术字符串  模版字符串 在javascript语言中,生成实例对象使用构造函数;ES6提供了类Class这个概念,作为对象的模板。定

    2024年02月16日
    浏览(50)
  • JS 原型与继承2

    //***-、原型、原型链、构造函数 prototype、 proto_、constructor function Foo(){this.a=1} var foo = new Foo(); Object.getPrototypeOf(foo);//访问对象原型 效果等同于,foo. proto ,只是更推荐使用 Es6的 Object.getPrototypeof()方式 // constructor是原型上的一个属性,指向的是构造函数,如果重写了原型,就需

    2024年02月14日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包