快捷導(dǎo)航

JavaScript繼承的三種方法實例

更新時間：2021年05月12日 12:08:02 作者：流楚丶格念

這篇文章主要給大家介紹了關(guān)于JavaScript繼承的三種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

繼承

1. 什么是繼承

繼承: 首先繼承是一種關(guān)系，類(class)與類之間的關(guān)系，JS中沒有類,但是可以通過構(gòu)造函數(shù)模擬類，然后通過原型來實現(xiàn)繼承。

繼承也是為了數(shù)據(jù)共享,js中的繼承也是為了實現(xiàn)數(shù)據(jù)共享

我們可以聯(lián)想到原型，他的兩個作用是：

原型作用之一:數(shù)據(jù)共享,節(jié)省內(nèi)存空間
原型作用之二:為了實現(xiàn)繼承

繼承是一種關(guān)系：父類級別與類級別的關(guān)系

例子:

人類別: 姓名, 性別, 年齡 ,吃飯, 睡覺

學(xué)生類別: 姓名, 性別, 年齡 ,吃飯, 睡覺學(xué)習(xí)行為

老師類別: 姓名, 性別, 年齡 ,吃飯, 睡覺工資,教學(xué)行為

程序員: 姓名, 性別, 年齡 ,吃飯, 睡覺工資, 敲代碼

司機(jī)類別: 姓名, 性別, 年齡 ,吃飯, 睡覺工資開車

動物類別: 體重，顏色, 吃

狗類別: 體重,顏色, 吃, 咬人

二哈類別: 體重,顏色, 吃, 咬人逗主人開心,汪汪,你好帥

面向?qū)ο蟮奶匦?封裝,繼承,多態(tài)

封裝:就是包裝
一個值存儲在一個變量中–封裝
一坨重復(fù)代碼放在一個函數(shù)中–封裝
一系列的屬性放在一個對象中–封裝
一些功能類似的函數(shù)(方法)放在一個對象中–封裝
好多相類似的對象放在一個js文件中—封裝

多態(tài):一個對象有不同的行為,或者是同一個行為針對不同的對象,產(chǎn)生不同的結(jié)果,要想有多態(tài),就要先有繼承,js中可以模擬多態(tài),但是不會去使用,也不會模擬,

2. JavaScript繼承的三種方法

構(gòu)造函數(shù)的屬性繼承：借用構(gòu)造函數(shù)

繼承的時候,不用改變原型的指向,直接調(diào)用父級的構(gòu)造函數(shù)的方式來為屬性賦值就可以了

—— 借用構(gòu)造函數(shù):把要繼承的父級的構(gòu)造函數(shù)拿過來,使用一下就可以啦。

借用構(gòu)造函數(shù):

構(gòu)造函數(shù)名字.call(當(dāng)前對象,屬性,屬性,屬性....);

優(yōu)點：解決了屬性繼承,并且值不重復(fù)的問題

缺陷:父級類別中的方法不能繼承

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

function Student (name, age) {
  // 借用構(gòu)造函數(shù)繼承屬性成員
  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) {
      //借用構(gòu)造函數(shù)
      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>

構(gòu)造函數(shù)的原型方法繼承：拷貝繼承（for-in）

拷貝繼承；把一個對象中的屬性或者方法直接復(fù)制到另一個對象中

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>

    //拷貝繼承；把一個對象中的屬性或者方法直接復(fù)制到另一個對象中
    function Person() {
    }
    Person.prototype.age=10;
    Person.prototype.sex="男";
    Person.prototype.height=100;
    Person.prototype.play=function () {
      console.log("玩的好開心");
    };
    var obj2={};
    //Person的構(gòu)造中有原型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)
}

// 利用原型的特性實現(xiàn)繼承
Student.prototype = new Person()

var s1 = Student('張三', 18)

console.log(s1.type) // => human

s1.sayName() // => hello 張三

組合繼承：原型+借用構(gòu)造函數(shù)繼承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script>


    //原型實現(xiàn)繼承
    //借用構(gòu)造函數(shù)實現(xiàn)繼承
    //組合繼承:原型繼承+借用構(gòu)造函數(shù)繼承

    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) {
      //借用構(gòu)造函數(shù):屬性值重復(fù)的問題
      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>