欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

談一談javascript中繼承的多種方式

 更新時(shí)間：2016年02月19日 09:03:09   作者：要飯的  
本文就和大家談一談javascript中的繼承，什么是繼承，繼承的作用，以及js繼承的實(shí)現(xiàn)代碼，感興趣的小伙伴們可以參考一下

JS 是沒(méi)有繼承的，不過(guò)可以曲線救國(guó)，利用構(gòu)造函數(shù)、原型等方法實(shí)現(xiàn)繼承的功能。

 var o=new Object();

其實(shí)用構(gòu)造函數(shù)實(shí)例化一個(gè)對(duì)象，就是繼承，這里可以使用Object中的所有屬性與方法。那么為什么能訪問(wèn)Object對(duì)象的方法，其實(shí)訪問(wèn)的是其原型對(duì)象的方法，所有的方法都是放在原型中而不是類中。

console.log(o.__proto__ === Object.prototype) // true 繼承的本質(zhì)
console.log(o.__proto__ === Object);
console.log(Object.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Number.__proto__ === Function.prototype);

object是萬(wàn)物祖先，Everything is object 嘛。 

1、內(nèi)置對(duì)象都繼承自object 

var myNumber = new Number(10); //實(shí)例化一個(gè)數(shù)字對(duì)象

字符串對(duì)象，其實(shí)是String對(duì)象的一個(gè)實(shí)例化 

var s = ‘str';

 除了可以訪問(wèn)自身屬性方法，還能訪問(wèn)父類屬性方法

console.log(s.toUpperCase());
console.log(s.toString());

2、自定義對(duì)象的繼承

// 父類
  var Person = function(){
   this.name='AV老師';
   this.test='測(cè)試中的畢福劍';
  } 
  Person.prototype={
   say:function(){
    console.log('呀買碟');
   }
  }
  // 構(gòu)造函數(shù)
  var Canglaoshi = function(name,age,cup){
   this.name=name;
   this.age=age;
   this.cup=cup;
  }
  // 繼承person,則擁有person原型中的方法
  Canglaoshi.prototype=new Person();
  Canglaoshi.prototype.ppp=function(){
   console.log('啪啪啪');
  }
  // 蒼老師擁有了person中的方法
  var xiaocang=new Canglaoshi('空空',18,'E');
  xiaocang.say();
  console.log(xiaocang.name);
  console.log(xiaocang.age);
  console.log(xiaocang.cup);
  console.log(xiaocang.test);

3、自定義對(duì)象繼承的原型鏈演示

(function() {
   //父類
   function SuperParent() {
    this.name = 'mike';
   }

   //子類繼承父親 - 二次繼承：
   function Parent() {
    this.age = 12;
   }
   Parent.prototype = new SuperParent(); //通過(guò)原型，形成鏈條

   var parent = new Parent();
   console.log("測(cè)試父親可以訪問(wèn)爺爺屬性：" + parent.name);
   console.log("測(cè)試父親可以訪問(wèn)自己的屬性：" + parent.age);

   //繼續(xù)原型鏈繼承 - 三次繼承
   function Child() { //brother構(gòu)造
    this.weight = 60;
   }
   Child.prototype = new Parent(); //繼續(xù)原型鏈繼承


   //原型鏈測(cè)試2
   //兒子集成爺爺
   var child = new Child();
   console.log("測(cè)試兒子可以訪問(wèn)爺爺?shù)膶傩裕? + child.name); //繼承了Parent和Child,彈出mike
   console.log("測(cè)試兒子可以訪問(wèn)父親的屬性：" + child.age); //彈出12
   console.log("測(cè)試兒子可以訪問(wèn)自己獨(dú)特的屬性：" + child.weight); //彈出12

   //原型鏈測(cè)試
   //爺爺可以訪問(wèn)Object中的方法
   var test = new SuperParent();
   console.log(test.name);
   console.log(test.toString());
   //訪問(wèn)鏈： SuperParent構(gòu)造對(duì)象--》SuperParent原型對(duì)象--》Object對(duì)象--》Obect原型對(duì)象（找到toString方法）--》null

   console.log(child.name);
   //原型鏈：首先訪問(wèn)Child構(gòu)造函數(shù)，發(fā)現(xiàn)沒(méi)有name屬性--》尋找__proto__，判斷起指針是否為空--》指向Child原型函數(shù)，尋找有沒(méi)有name屬性--》
   //---》沒(méi)有找到，則判斷其__proto__屬性是否為null，如果不為null，繼續(xù)搜索--》找到parent對(duì)象，檢查是否有name屬性，沒(méi)有。。。。
  })()

4、構(gòu)造函數(shù)繼承

(function() {
   function People() {
    this.race = '人類';
   }
   People.prototype = {
    eat: function() {
     alert('吃吃吃');
    }
   }

   /*人妖對(duì)象*/
   function Shemale(name, skin) {
    People.apply(this, arguments); // 用call也是一樣的，注意第二個(gè)參數(shù)
    this.name = name;
    this.skin = skin;
   }
   //實(shí)例化 
   var zhangsan = new Shemale('張三', '黃皮膚')
   console.log(zhangsan.name); //張三
   console.log(zhangsan.skin); //黃皮膚
   console.log(zhangsan.race); //人類
  })()

5、組合繼承

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

   function Man(name, age, no) {
    /*會(huì)自動(dòng)調(diào)用Person的方法，同時(shí)將name age傳遞過(guò)去*/
    Person.call(this, name, age);
    //自己的屬性
    this.no = no;
   }
   Man.prototype = new Person();

   var man = new Man("張三", 11, "0001");
   console.log(man.name);
   console.log(man.age);
   console.log(man.no);
  })()

6、拷貝繼承

<script>
  +(function() {
   var Chinese = {
    nation: '中國(guó)'
   };
   var Doctor = {
    career: '醫(yī)生'
   };
   //  請(qǐng)問(wèn)怎樣才能讓"醫(yī)生"去繼承"中國(guó)人"，也就是說(shuō)，我怎樣才能生成一個(gè)"中國(guó)醫(yī)生"的對(duì)象？
   //  這里要注意，這兩個(gè)對(duì)象都是普通對(duì)象，不是構(gòu)造函數(shù)，無(wú)法使用構(gòu)造函數(shù)方法實(shí)現(xiàn)"繼承"。
   function extend(p) {
    var c = {};
    for (var i in p) {　　　　　
     c[i] = p[i];　　　　
    }
    c.uber = p;
    return c;
   }
   var Doctor = extend(Chinese);
   Doctor.career = '醫(yī)生';
   alert(Doctor.nation); // 中國(guó)
  })()
 </script>

7、寄生組合繼承

<script>
  +(function() {
   /*繼承的固定函數(shù)*/
   function inheritPrototype(subType, superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
   }

   function Person(name) {
    this.name = name;
   }
   Person.prototype.say = function() {}

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

   inheritPrototype(Student, Person);
   var xiaozhang = new Student('小張', 20);
   console.log(xiaozhang.name)
  })()
 </script>

8、使用第三方框架實(shí)現(xiàn)繼承

<script src='simple.js'></script> 
 <!-- 使用的第三方框架simple.js -->
 <script>
  +(function() { < script >
    var Person = Class.extend({
     init: function(age, name) {
      this.age = age;
      this.name = name;
     },
     ppp: function() {
      alert("你懂的");
     }
    });
   var Man = Person.extend({
    init: function(age, name, height) {
     this._super(age, name);
     this.height = height;
    },
    ppp: function() {
     /*調(diào)用父類的同名方法*/
     this._super();
     /*同時(shí)又可以調(diào)用自己的方法*/
     alert("好害羞 -，- ");
    }
   });


   var xiaozhang = new Man(21, '小張', '121');
   xiaozhang.ppp();
  })()

希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論