JavaScript-封装与继承(两种)

crystal_iwwish 2021-11-25 18:44:31
javascript 继承 封装 两种 javascript-


构造函数的方法

一、封装

1.1命名空间

 // 命名空间:把变量当做属性,本质上是字面量对象
let zsf = {

uname : '李四',
age : 22,
email : 'zsf@qq.com'
}
let lxh = {

uname : '张三',
age : 21,
email : 'lxh@qq.com'
}
let zwj = zsf;
zwj.uname = '王五'
console.log( zsf.uname, lxh.uname );
//缺点是 谁封装完只能谁使用,别人不能使用

在这里插入图片描述

1.2构造函数

 // 构造函数:把构造函数当做模板
function Person(uname, age) {

this.uname = uname;
this.age = age;
this.eat = function () {

console.log("方法");
};
}
let zsf = new Person("haha", 22);
console.log(zsf);

1.3原型对象

 // 在原型上的成员(属性 和 方法) 都是共享给实例对象的,
// _proto_,(原型)指向原型对象,每个对象都有的属性,非标准属性
function Person(uname, age) {

this.uname = uname;
this.age = age;
// this.eat = function () {

// console.log("方法");
// };
}
Person.prototype.eat = function () {

console.log("原型");
};
let obj = new Person("haha", 22);
console.log(obj);

二、继承

原型继承

 function Person() {

this.arms = 2;
this.legs = 2;
this.eyes = 2;
// 人的行为
this.walk = function () {
};
this.sing = function () {
};
this.sleep = function () {
};
}
function Chinese() {

// 中国人的特征
skin = "yellow";
language = "中文";
}
// 封装日本人的行为特征
function Japanese() {

// 日本人的特征
skin = "yellow";
language = "日语";
}
// 1.给原型对象继承
// 2.指回去
Chinese.prototype = new Person();
Chinese.prototype.constructor = Chinese;
Japanese.prototype = new Person();
Japanese.prototype.constructor = Japanese;
// console.log(p);
let c1 = new Chinese();
console.log(c1);
let c2 = new Japanese();
console.log(c2);

在这里插入图片描述

原型链

在这里插入图片描述


类的方法

一、封装

创建类:

 // 创建类
class Person {

// 此处编写封装逻辑
name='小红' //实例成员
static age=22 //静态成员
}
// 实例化
let p1 = new Person();
console.log(p1);

构造封装函数:

 class Person {

// 实例化时 立即执行
// 构造函数、构造方法、构造器
constructor (name, age) {
 //并非是类中必须要存在的方法
this.name = name;
this.age = age;
}
// 实例方法
walk () {

console.log(this.name + '走路');
}
}
// 实例化
let p1 = new Person('小明', 18);
p1.walk();

二、继承

2.1 extends

 class Person {

// 父类的属性
legs = 2;
arms = 2;
eyes = 2;
// 父类的方法
walk () {

console.log('走路');
}
// 父类的方法
sleep () {

console.log('睡觉');
}
}
// Chinese 继承了 Person 的所有特征
class Chinese extends Person {
}
// 实例化
let c1 = new Chinese();
c1.walk();

2.2 super(在继承的过程中子类中 constructor 中必须调 super 函数,否则会有语法错误)

class Father {

constructor (uname, age) {

this.uname = uname;
this.age = age;
}
qian () {

console.log('哈哈哈');
}
}
// 如果子类有自己的constructor,那么必须使用super调用父类的方法
// super:调用父类的方法
class Son extends Father {

constructor (u, a, score) {

super(u, a);// 必须先调用super
this.score = score;
}
qian () {

console.log('嘻嘻嘻');
super.qian();
}
}
let s = new Son('儿子', 23, 99);
console.log( s );
s.qian();

以上这种情况就是说,子类有自己单独的属性或者方法,所以子类有自己的constructor,那么必须使用super调用父类的方法

版权声明
本文为[crystal_iwwish]所创,转载请带上原文链接,感谢
https://blog.csdn.net/crystal_iwwish/article/details/120856020

  1. [skills with annual salary of 60W] after working for 5 years, do you really understand netty and why to use it? (deep dry goods)
  2. Pourquoi MySQL récupère - t - il fréquemment les données ibd?
  3. Tutoriels de téléchargement et d'installation MySQL
  4. In IntelliJ idea, develop a fishing and reading plug-in
  5. Talk about how to integrate SPI with spring
  6. 重学Spring系列之Swagger2.0和Swagger3.0
  7. Hadoop05【命令操作】,Java400道面试题通关宝典助你进大厂
  8. Guava Cache缓存设计原理,java基础入门
  9. Gson:GitHub 标星 18K 的 JSON 解析器,Google 出品的 Java JSON 解析器
  10. gRPC学习之六:gRPC-Gateway集成swagger,java语言程序设计与数据结构进阶版
  11. Projet Java, enregistrer la valeur de modification de la page, utilisé pour les litiges internes
  12. Déterminer si un nombre est un nombre premier - - Java
  13. Sortie 9 * 9 tableau de multiplication - Java
  14. Plusieurs façons de réinitialiser le déplacement du Groupe de consommateurs Kafka
  15. GRPC Learning six: GRPC Gateway Integrated Swagger, Java language programming and data structure Advanced Edition
  16. python数据结构:数组、列表、栈、队列及实现
  17. Gson: json Parser for github Star 18k, Java json Parser from Google
  18. hive学习笔记之二:复杂数据类型,五分钟搞懂MySQL主从复制原理
  19. hive学习笔记之一:基本数据类型,java实现分页技术详解
  20. HDU-3038-How Many Answers Are Wrong【 带权并查集 】题解,java实战项目论坛
  21. HDU 1078 FatMouse and Cheese(记忆化搜索,DP,rocketmq教程教程
  22. Principes de conception du cache Guava, Introduction à la base Java
  23. Un pantalon beige = élégant, blanc + haut de gamme, si beau cet hiver!
  24. Hadoop05 【 commande 】, Java 400 questions d'entrevue pour vous aider à entrer dans l'usine
  25. [Java multithreading] static synchronized method and synchronized (class) code block
  26. [Java multithreading] synchronized statement block
  27. [Java multithreading] synchronized synchronization method
  28. [Java multithreading] thread priority and guard thread
  29. [Java multithreading] stop the thread
  30. Several methods of [Java multithreading] thread
  31. [Java multithreading] Java multithreading skills
  32. Structure des données Python: tableaux, listes, piles, files d'attente et implémentations
  33. Re - Learning Swagger 2.0 and Swagger 3.0 of Spring Series
  34. Error editing HTML5 using webstorm
  35. 【Spring】mybatis-spring
  36. JavaScript post request returned an exception, possibly Cross - Domain request
  37. 图解 Kafka 线程模型及其设计缺陷
  38. Springboot + mybatis Plus + springsecurity + JWT implements user stateless request authentication (front and back end separation)
  39. SQL injection and XSS attack of springboot security vulnerability
  40. Docker employee readme: Why did docker lose to kubernetes?
  41. 19 high force linux commands, hurry to use them!
  42. Add data files for Oracle tablespaces or temporary tablespaces
  43. Intellij IDEA神器居然还有这些小技巧,mysql集群搭建视频
  44. IntelliJ IDEA(2019)之Web项目创建,掌门一对一java面试题
  45. InnoDB(2,如何访问Redis中的海量数据
  46. InheritableThreadLocal使用详解,java多线程面试题及答案整理
  47. How does Oracle modify the data type of a column
  48. Oracle 12C 12.1.0.1.0 management control file official document translation instructions
  49. Oracle 10g 10.2.0.1 in Oracle Linux 5.4 32bit RAC installation manual (Yimo Xiyang)
  50. Oracle 12C in Oracle Linux 6.5 64bit installation manual
  51. 一天十道Java面试题----第一天(面向对象-------》ArrayList和LinkedList)
  52. Schéma du modèle de fil Kafka et de ses défauts de conception
  53. Starting and shutting down Oracle RAC database cluster
  54. CRS_ Oracle CRS stack is already configured and will be running under init(1M)
  55. Common skills of Oracle stored procedure
  56. Check the number of CPUs, core books and threads of the Linux system
  57. Oracle de duplicated data
  58. Oracle creates unique constraints on columns that already have duplicate data
  59. JavaScript-拷贝
  60.  There is ^ [[a garbled code problem in the up and down keys in Oracle sqlplus