2. 程式人生 > >js繼承的幾種方法理解和程式碼演示

js繼承的幾種方法理解和程式碼演示

阿新 • • 發佈：2018-12-08

1、屬性繼承 ：call 、apply:不建議使用浪費記憶體。

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}

Person.prototype.eat = function(){
    console.log("正在吃飯")
}
Person.prototype.sleep = function(){
    console.log("正在睡覺")
}


function Man(larynx,beard,name,age,sex,){
    Person.call(
 
this,name,age,sex)

    this.larynx = larynx;
    this.beard = beard;
    
}
Man.prototype.work = function(){
    console.log('111')
}
var songlei = new Man(10,20);
console.log(songlei);

    // Man{
        // age: undefined
        // beard: 20
        // larynx: 10
        // name: undefined
        // sex: undefined
 

    // }

2、原型繼承：

　　缺點：原型繼承會汙染父級 function Person(name,age,sex){     this.name = name;     this.age = age;     this.sex = sex; } Person.prototype.eat = function(){     console.log("正在吃飯") } Person.prototype.sleep = function(){     console.log("正在睡覺") }
function Man(larynx,beard,name,age,sex,){     Person.call(this,name,age,sex)     this.larynx = larynx;     this.beard = beard;      } Man.prototype = Person.prototype; Man.prototype.work = function(){     console.log('111') } var aaa = new Man(10,20); console.log(aaa);     // Man{         // age: undefined         //  beard: 20         //  larynx: 10         //  name: undefined         //  sex: undefined         //  __proto__:             //  eat: ƒ()             //  sleep: ƒ()             //  work: ƒ()             //  constructor: ƒ Person(name, age, sex)     // } var p1 = new Person() console.log(p1)     // Person{         // age: undefined         // name: undefined         // sex: undefined         // __proto__:         // eat: ƒ()         // sleep: ƒ()         // work: ƒ()         // constructor: ƒ Person(name, age, sex)     // }

3、原型拷貝：

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Person.prototype.eat = function(){
    console.log("正在吃飯")
}
Person.prototype.sleep = function(){
    console.log("正在睡覺")
}
function Man(larynx,beard,name,age,sex,){
    Person.call(this,name,age,sex)
    this.larynx = larynx;
    this.beard = beard;
    
}

for(var key in Person.prototype){
    Man.prototype[key] = Person.prototype[key]
}
Man.prototype.work = function(){
    console.log('111')
}

var aaa = new Man(10,20);
console.log(aaa);
    // Man { name: undefined, age: undefined, sex: undefined, larynx: 10, beard: 20 }
    // __proto__:
    // eat: ƒ()
    // sleep: ƒ()
    // work: ƒ()
    // constructor: ƒ Man(larynx, beard, name, age, sex)
var p1 = new Person()
console.log(p1)
    // Person { name: undefined, age: undefined, sex: undefined }
    // __proto__:
    // eat: ƒ()
    // sleep: ƒ()
    // constructor: ƒ Person(name, age, sex)

4、原型鏈繼承：

原型鏈：         由__proto__組成的鏈條叫做原型鏈 　　原型鏈繼承是不推薦使用的         因為會多了好多無用的屬性         而且還少了constructor 
function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}

Person.prototype.eat = function(){
    console.log("正在吃飯")
}


Person.prototype.sleep = function(){
    console.log("正在睡覺")
}
function Man(larynx,beard,name,age,sex,){
    Person.call(this,name,age,sex)

    this.larynx = larynx;
    this.beard = beard;
    
}
//    __proto        //__proto__
Man.prototype = new Person();
Man.prototype.work = function(){
    console.log('111')
}
var aaa = new Man(10,20);
console.log(aaa);
    // Man{
    //     age: undefined
    //     beard: 20
    //     larynx: 10
    //     name: undefined
    //     sex: undefined
    //     __proto__: Person
    //     age: undefined
    //     name: undefined
    //     sex: undefined
    //     work: ƒ()
    // }
    
var p1 = new Person()
console.log(p1)
    // Person{
    //     age: undefined
    //     name: undefined
    //     sex: undefined
    //     __proto__:
    //     eat: ƒ()
    //     sleep: ƒ()
    //     constructor: ƒ Person(name, age, sex)
    // }

5、寄生繼承：

缺點：增加了無用的函式

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Person.prototype.type="人類";
Person.prototype.eat = function(){
    console.log("正在吃飯")
}
Person.prototype.sleep = function(){
    console.log("正在睡覺")
}
function Man(larynx,beard,name,age,sex,){
    Person.call(this,name,age,sex)
    this.larynx = larynx;
    this.beard = beard;
    
}
//建立了一個寄生器
function fn(){};
//寄生器的原型物件 = 人類的原型物件
fn.prototype = Person.prototype;
//原型鏈繼承   寄生器的例項物件
Man.prototype = new fn();
Man.prototype.constructor = Man;
Man.prototype.work = function(){
    console.log('111')
}
var aaa = new Man(10,20);
console.log(aaa);
    // Man{
    //     age: undefined
    //     beard: 20
    //     larynx: 10
    //     name: undefined
    //     sex: undefined
    //     __proto__: Person
    //     constructor: ƒ Man(larynx, beard, name, age, sex)
    //     work: ƒ()
    // }

6、混合繼承：我最喜歡的一種方式

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Person.prototype.type="人類";
Person.prototype.eat = function(){
    console.log("正在吃飯")
}
Person.prototype.sleep = function(){
    console.log("正在睡覺")
}
function Man(larynx,beard,name,age,sex,){
    Person.call(this,name,age,sex)
    this.larynx = larynx;
    this.beard = beard;
}
//Man.prototype = Object.create(Person.prototype);
Man.prototype = {
    constructor:Man,
    __proto__:Person.prototype
}
Man.prototype.work = function(){
    console.log('111')
}
var aaa = new Man(10,20);
console.log(aaa);
    // Man{
    //     age: undefined
    //     beard: 20
    //     larynx: 10
    //     name: undefined
    //     sex: undefined
    //     __proto__: Person
    //     constructor: ƒ Man(larynx, beard, name, age, sex)
    //     work: ƒ()
    // }
    
var p1 = new Person();
console.log(p1)
    // Person{
    //     age: undefined
    //     name: undefined
    //     sex: undefined
    //     __proto__:
    //     eat: ƒ()
    //     sleep: ƒ()
    //     type: "人類"
    //     constructor: ƒ Person(name, age, sex)
    // }

7、Es6繼承

ES6類的語法             1、宣告類的時候用 class        class 類名{             constructor(){                 屬性             }             方法         } 
class Person{
         constructor(name,age,sex){
             this.name = name;
            this.age = age;
            this.sex = sex;
         }
         eat(){}
         sleep(){}
     }
     class Man extends Person{
             constructor(larynx,beard){
                 //實現繼承必須使用super
                 super();
                 this.larynx = larynx;
                 this.beard = beard;
             }
             work(){}
     } 
    var aaa = new Man()
    console.log(aaa)
    // Man{
    //     age: undefined
    //     beard: undefined
    //     larynx: undefined
    //     name: undefined
    //     sex: undefined
    //     __proto__: Person
    //     constructor: class Man
    //     work: ƒ work()
    // }

 

相關推薦

js繼承的幾種方法理解和程式碼演示

1、屬性繼承 ：call 、apply:不建議使用浪費記憶體。 function Person(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } Person.prototype.eat =

a 標簽中調用js的幾種方法

操作符 target void 停止 w3c標準 sdn gif動畫 iba tle 我們常用的在a標簽中有點擊事件：1. a href="JavaScript:js_method();"這是我們平臺上常用的方法，但是這種方法在傳遞this等參數的時候很容易出問題，而且ja

JS繼承幾種方式

person fun argument per arguments 訪問 temp 共享 構造 1、原型繼承<script> function Person(name,age){ this.name = name; this.age = age; } Per

a標簽調用js的幾種方法

nbsp 標識符 alibaba 方式 相對 頁面 false 運行 undefine 我們常用的在a標簽中有點擊事件： <a> 標簽的 href 屬性用於指定超鏈接目標的 URL，href 屬性的值可以是任何有效文檔的相對或絕對 URL，包括片段標識符和 Ja

Python中遍歷pandas資料的幾種方法介紹和效率對比說明

前言 Pandas是python的一個數據分析包，提供了大量的快速便捷處理資料的函式和方法。其中Pandas定義了Series 和 DataFrame兩種資料型別，這使資料操作變得更簡單。Series 是一種一維的資料結構，類似於將列表資料值與索引值相結合。DataFrame 是一種二維

a標籤中href呼叫js的幾種方法

我們常用的在a標籤中有點選事件： 1. a href=”javascript:js_method();” 這是我們平臺上常用的方法，但是這種方法在傳遞this等引數的時候很容易出問題，而且javascript:協議作為a的href屬性的時候不僅會導致不必要的觸發window.onbeforeun

頁面載入時執行js的幾種方法

第一種： [javascript] $(document).ready(function(){       alert("第一種方法。");   });   第二種： [javascript] $(function(){      alert("第二種方法。");  });   第三種

Java基礎面試題（16）----JDBC的理解和程式碼演示PrepareStatement

問題 說一下對JDBC的理解 程式碼演示連線資料庫 PrepareStatement和statement的使用 解析 JDBC指的是 Java database connection Java資料庫連線資料庫管理系統。 問題是： 實際的資料庫開放廠商有很多

利用JS提交表單的幾種方法和驗證(必看篇)

www contain 功能 ner ble 四種 利用 comm pac 第一種方式：表單提交，在form標簽中增加onsubmit事件來判斷表單提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

js數組遍歷的常用的幾種方法以及差異和性能優化

object length 回調 value 鏈式操作 item IT rip 需要 <script type="text/javascript"> /*對比: 1、map速度比foreach快

js複製物件和陣列的幾種方法

js中的基本資料型別可以直接進行復制 例如： var str1 = '123456' var str2 = str1 console.log(str2)  //123456 str1 = '123' console.log(str2)  //123 如果是引用型別

js顯示和隱藏的幾種方法

顯示                      隱藏 fadeIn()                fa

js中繼承的幾種方法

繼承就是子能夠用父的東西，下面直接進入正題： 例項層面上的繼承： 1.淺拷貝： var person={ name:"cj", age:'22', add:{ c:"33", d:'44' } } var

js原型繼承的幾種方法

原型繼承 首先建立一個建構函式，併為其設定私有屬性和公有屬性。 // 定義一個人類 function Person (name) { // 屬性 this.name = name; // 例項方法 this.sleep =

原生 js 操作dom的方法（建立節點和操作節點的幾種方法）

var  newNode=  document.createElement("p");//建立新節點 var  text=  document.createTextNode("hello");//建立文字節點 newNode.appendChild(text); docum

Jsp頁面跳轉和js控制頁面跳轉的幾種方法

Jsp 頁面跳轉的幾種方法 1. RequestDispatcher.forward() 在伺服器端起作用,當使用forward()時,Servlet engine傳遞HTTP請求從當前的Servlet或者是JSP到另外的一個Servlet、JSP 或普通HTML檔

oracle update 幾種方法容易理解和使用的更新命令

      習慣了SQL server的update寫法，感覺如此優雅和簡便，近期要用oracle，是如此的不方便。經過努力發現三種寫法還是很不錯的，真不愧是大佬。     例子：兩個表，結構相同，都有編號和名稱。           create table tb1(  

判斷JS數據類型的幾種方法

object sta 無效 追溯 是否 執行 都是 undefine 代碼 原文轉自http://www.cnblogs.com/onepixel/p/5126046.html！ 說到數據類型，我們先說一下JavaScript 中常見的幾種數據類型： 基本類型：string

js中幾種實用的跨域方法原理詳解

自身 標簽 cdc 返回 屬性和方法 插入 實用 封裝 判斷 這裏說的js跨域是指通過js在不同的域之間進行數據傳輸或通信，比如用ajax向一個不同的域請求數據，或者通過js獲取頁面中不同域的框架中(iframe)的數據。只要協議、域名、端口有任何一個不同， 都被當作是不同

js中常用追加元素的幾種方法：append，appendTo，after，before，insertAfter，insertBefore，appendChild

pre gre con 常用 align lin width insert rip js中常用追加元素的幾種方法,點擊下面每個按鈕，即可查看效果 我是第一個子元素 我是第二個子元素 append appendTo prepend prependTo a