JavaScript物件導向中的封裝和繼承你瞭解嗎

2022-02-11 16:00:08

1、物件導向

【三大顯著特徵】： 封裝、繼承、多型

1、封裝

【解釋】： 封裝的本質就是將有關聯的程式碼組合在一起。

【優勢】：

保證程式碼可以複用提高程式碼的維護效率

【以前的封裝方法】：

函數封裝

function fn(){}

名稱空間封裝

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

【新的封裝方法】：

建構函式

//自定義建構函式
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)

【總結】：

建構函式體現了物件導向的封裝特性建構函式範例建立的物件彼此獨立、互不影響名稱空間式的封裝無法保證資料的獨立性

2、原型物件

【解釋】： 本質是建構函式的一個屬性，prototype 的是物件類據型別，稱為建構函式的原型物件。

【程式碼範例】：

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()

【總結】：

只要是建構函式就有原型物件
原型物件中的方法，範例物件可以直接呼叫
原型物件和建構函式都有相同的方法的時候就使用建構函式本身的方法

【constructor屬性】： 代表了該原型物件對應的建構函式。

【範例】：

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

【圖解】：

【__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 () {}
  }

【總結】：其實我們都知道無論是中國人、日本人還是其它民族，人們的大部分特徵是一致的，然而體現在程式碼中時人的相同的行為特徵被重複編寫了多次，程式碼顯得十分冗餘，我們可以將重複的程式碼抽離出來

【程式碼改寫】：

<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 是建構函式 Person 的範例
  let human = new Person();
  // 中國人
  Chinese.prototype = new Person();
  Chinese.prototype.constructor = Chinese;
  // 日本人
  Japanese.prototype = human;
  Japanese.prototype.constructor = Japanese;

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注it145.com的更多內容!

JavaScript物件導向中的封裝和繼承你瞭解嗎

目錄

1、物件導向

1、封裝

2、原型物件

3、繼承

總結

熱門文章