JavaScript面向?qū)ο笾械姆庋b和繼承你了解嗎

更新時間：2022年02月11日 14:57:05 作者：執(zhí)手天涯@

這篇文章主要為大家詳細介紹了JavaScript面向?qū)ο笾械姆庋b和繼承，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

1、面向?qū)ο?/h2>
【三大顯著特征】：封裝、繼承、多態(tài)

1、封裝

【解釋】： 封裝的本質(zhì)就是將有關(guān)聯(lián)的代碼組合在一起。

【優(yōu)勢】：

保證代碼可以復用提高代碼的維護效率

【以前的封裝方法】：

函數(shù)封裝

function fn(){}

命名空間封裝

let o={
name:'zhangsan',
age:20
}
let obj={
name:'lisi',
age:18
}

【新的封裝方法】：

構(gòu)造函數(shù)

//自定義構(gòu)造函數(shù)
function Person(name,age,height,weight){
	this.name=name;
	this.age=age;
	this.height=height;
	this.weight=weight;
	//方法
	this.eat=function(){
	console.log('吃飯')
	}
	this.sleep=function(){
	console.log('睡覺')
	}
}
//實例化一個對象
let obj1=new Person('zhangsan',20,'198cm','60kg')
console.log(obj1)
let obj2=new Person('lisi',24,'168cm','70kg')
console.log(obj2)

【總結(jié)】：

構(gòu)造函數(shù)體現(xiàn)了面向?qū)ο蟮姆庋b特性構(gòu)造函數(shù)實例創(chuàng)建的對象彼此獨立、互不影響命名空間式的封裝無法保證數(shù)據(jù)的獨立性

2、原型對象

【解釋】： 本質(zhì)是構(gòu)造函數(shù)的一個屬性，prototype 的是對象類據(jù)類型，稱為構(gòu)造函數(shù)的原型對象。

【代碼示例】：

function Person(name,age){
    this.name=name
    this.age=age
    //this.sing=function (){
	//console.log('唱歌')
	//}
}
console.log(Person.prototype);
Person.prototype.sing=function(){
console.log('唱歌')
}
let p1=new Person('zhangsan',20);
console.log(p1)
p1.sing()

【總結(jié)】：

只要是構(gòu)造函數(shù)就有原型對象
原型對象中的方法，實例對象可以直接調(diào)用
原型對象和構(gòu)造函數(shù)都有相同的方法的時候就使用構(gòu)造函數(shù)本身的方法

【constructor屬性】： 代表了該原型對象對應(yīng)的構(gòu)造函數(shù)。

【示例】：

function Person(name,age){
	this.name=name
	this.age=age
}
console.log(Person.prototype,constructor)

【圖解】：

請?zhí)砑訄D片描述

【__proto__屬性】： 用于指向原型對象

【示例】：

function Person(name,age){
	this.name=name
	this,age=age
}
Person.prototype.eat=function(){
	console.log('吃飯')
}
let person1=new Person('張三'，22);
console.log(person.__proto__===Person.prototype)

3、繼承

【封裝問題引出】：

// 封裝中國人的行為特征
  function Chinese() {
    // 中國人的特征
    this.arms = 2;
    this.legs = 2;
    this.eyes = 2;
    this.skin = 'yellow';
    this.language = '中文';
    // 中國人的行為
    this.walk = function () {}
    this.sing = function () {}
    this.sleep = function () {}
  }
  // 封裝日本人的行為特征
  function Japanese() {
    // 日本人的特征
    this.arms = 2;
    this.legs = 2;
    this.eyes = 2;
    this.skin = 'yellow';
    this.language = '日文';
    // 日本人的行為
    this.walk = function () {}
    this.sing = function () {}
    this.sleep = function () {}
  }

【總結(jié)】：其實我們都知道無論是中國人、日本人還是其它民族，人們的大部分特征是一致的，然而體現(xiàn)在代碼中時人的相同的行為特征被重復編寫了多次，代碼顯得十分冗余，我們可以將重復的代碼抽離出來

【代碼改寫】：

<script>
  // 所有人
  function Person() {
    // 人的特征
    this.arms = 2;
    this.legs = 2;
    this.eyes = 2;
    // 人的行為
    this.walk = function () {}
    this.sing = function () {}
    this.sleep = function () {}
  }
  // 封裝中國人的行為特征
  function Chinese() {
    // 中國人的特征
    this.skin = 'yellow';
    this.language = '中文';
  }
  // 封裝日本人的行為特征
  function Japanese() {
    // 日本人的特征
    this.skin = 'yellow';
    this.language = '日文';
  }
  // human 是構(gòu)造函數(shù) Person 的實例
  let human = new Person();
  // 中國人
  Chinese.prototype = new Person();
  Chinese.prototype.constructor = Chinese;
  // 日本人
  Japanese.prototype = human;
  Japanese.prototype.constructor = Japanese;