JavaScript继承的几种方法

简介: JavaScript继承的几种方法

继承


1. 什么是继承


继承: 首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承。


  • 继承也是为了数据共享,js中的继承也是为了实现数据共享


我们可以联想到原型,他的两个作用是:


  • 原型作用之一:数据共享,节省内存空间


  • 原型作用之二:为了实现继承


继承是一种关系:父类级别与类级别的关系


例子:


  • 人类别: 姓名, 性别, 年龄 ,吃饭, 睡觉


学生类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 学习行为


老师类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 工资,教学行为


程序员: 姓名, 性别, 年龄 ,吃饭, 睡觉 工资, 敲代码


司机类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 工资 开车


  • 动物类别: 体重, 颜色, 吃


狗类别: 体重,颜色, 吃, 咬人


二哈类别: 体重,颜色, 吃, 咬人 逗主人开心,汪汪,你好帅


面向对象的特性:封装,继承,多态


封装:就是包装


一个值存储在一个变量中–封装


一坨重复代码放在一个函数中–封装


一系列的属性放在一个对象中–封装


一些功能类似的函数(方法)放在一个对象中–封装


好多相类似的对象放在一个js文件中—封装


多态:一个对象有不同的行为,或者是同一个行为针对不同的对象,产生不同的结果,要想有多态,就要先有继承,js中可以模拟多态,但是不会去使用,也不会模拟,


2. JavaScript继承的三种方法


构造函数的属性继承:借用构造函数


继承的时候,不用改变原型的指向,直接调用父级的构造函数的方式来为属性赋值就可以了


—— 借用构造函数:把要继承的父级的构造函数拿过来,使用一下就可以啦。


借用构造函数:


构造函数名字.call(当前对象,属性,属性,属性....);


  • 优点:解决了属性继承,并且值不重复的问题


  • 缺陷:父级类别中的方法不能继承


function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}
function Student (name, age) {
  // 借用构造函数继承属性成员
  Person.call(this, name, age)
}
var s1 = Student('张三', 18)
console.log(s1.type, s1.name, s1.age) // => human 张三 18


案例:



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    function Person(name, age, sex, weight) {
      this.name = name;
      this.age = age;
      this.sex = sex;
      this.weight = weight;
    }
    Person.prototype.sayHi = function () {
      console.log("您好");
    };
    function Student(name,age,sex,weight,score) {
      //借用构造函数
      Person.call(this,name,age,sex,weight);
      this.score = score;
    }
    var stu1 = new Student("小明",10,"男","10kg","100");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.weight, stu1.score);
    var stu2 = new Student("小红",20,"女","20kg","120");
    console.log(stu2.name, stu2.age, stu2.sex, stu2.weight, stu2.score);
    var stu3 = new Student("小丽",30,"妖","30kg","130");
    console.log(stu3.name, stu3.age, stu3.sex, stu3.weight, stu3.score);
  </script>
</head>
<body>
</body>
</html>


构造函数的原型方法继承:拷贝继承(for-in)


拷贝继承;把一个对象中的属性或者方法直接复制到另一个对象中


function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}
Person.prototype.sayName = function () {
  console.log('hello ' + this.name)
}
function Student (name, age) {
  Person.call(this, name, age)
}
// 原型对象拷贝继承原型对象成员
for(var key in Person.prototype) {
  Student.prototype[key] = Person.prototype[key]
}
var s1 = Student('张三', 18)
s1.sayName() // => hello 张三


案例:



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    //拷贝继承;把一个对象中的属性或者方法直接复制到另一个对象中
    function Person() {
    }
    Person.prototype.age=10;
    Person.prototype.sex="男";
    Person.prototype.height=100;
    Person.prototype.play=function () {
      console.log("玩的好开心");
    };
    var obj2={};
    //Person的构造中有原型prototype,prototype就是一个对象,那么里面,age,sex,height,play都是该对象中的属性或者方法
    for(var key in Person.prototype){
      obj2[key]=Person.prototype[key];
    }
    console.dir(obj2);
    obj2.play();
  </script>
</head>
<body>
</body>
</html>


另一种继承方式:原型继承


原型继承:改变原型的指向


function Person (name, age) {
  this.type = 'human'
  this.name = name
  this.age = age
}
Person.prototype.sayName = function () {
  console.log('hello ' + this.name)
}
function Student (name, age) {
  Person.call(this, name, age)
}
// 利用原型的特性实现继承
Student.prototype = new Person()
var s1 = Student('张三', 18)
console.log(s1.type) // => human
s1.sayName() // => hello 张三


组合继承:原型+借用构造函数继承



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>
    //原型实现继承
    //借用构造函数实现继承
    //组合继承:原型继承+借用构造函数继承
    function Person(name,age,sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
    }
    Person.prototype.sayHi=function () {
      console.log("萨瓦迪卡");
    };
    function Student(name,age,sex,score) {
      //借用构造函数:属性值重复的问题
      Person.call(this,name,age,sex);
      this.score=score;
    }
    //改变原型指向----继承
    Student.prototype=new Person();//不传值
    Student.prototype.eat=function () {
      console.log("吃东西");
    };
    var stu=new Student("小黑",20,"男","100分");
    console.log(stu.name,stu.age,stu.sex,stu.score);
    stu.sayHi();
    stu.eat();
    var stu2=new Student("小黑黑",200,"男人","1010分");
    console.log(stu2.name,stu2.age,stu2.sex,stu2.score);
    stu2.sayHi();
    stu2.eat();
    //属性和方法都被继承了
  </script>
</head>
<body>
</body>
</html>


继承小总结


  • 原型继承:改变原型的指向


  • 借用构造函数继承:主要解决属性的问题


  • 组合继承:原型继承+借用构造函数继承


既能解决属性问题,又能解决方法问题


  • 拷贝继承:就是把对象中需要共享的属性或者犯法,直接遍历的方式复制到另一个对象中
相关文章
|
8天前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
1天前
|
JavaScript 前端开发
Javascript如何实现继承?
【10月更文挑战第24天】JavaScript 中实现继承的方式有很多种,每种方式都有其优缺点和适用场景。在实际开发中,我们需要根据具体的需求和情况选择合适的继承方式,以实现代码的复用和扩展。
|
1天前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。
|
12天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
13天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
31 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
18天前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
17 3
|
18天前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
24 1
|
19天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
14 2
|
13天前
|
存储 JavaScript 前端开发
JavaScript数组去重的八种方法详解及性能对比
在JavaScript开发中,数组去重是一个常见的操作。本文详细介绍了八种实现数组去重的方法,从基础的双重循环和 indexOf() 方法,到较为高级的 Set 和 Map 实现。同时,分析了每种方法的原理和适用场景,并指出了使用 Set 和 Map 是目前最优的解决方案。通过本文,读者可以深入理解每种方法的优缺点,并选择最合适的数组去重方式。
27 0
|
14天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
85 0