js 物件導向

2021-10-06 18:56:49 字數 3118 閱讀 6723

通過函式模擬物件的繼承

// 定義乙個基類函式

function

person

(name, age)

// 一般將方法寫在原型中可以降低記憶體的佔用率

person.prototype.

info

=function()

;// 定義乙個學生類函式

function

student

(name, age, stuno)

// 定義乙個老師類函式

function

teachers

(name, age, major)

// 原型重新賦值,實現繼承關係(但是實際上這種寫法是存在隱患的,

student.prototype = person.prototype;

teachers.prototype = person.prototype;

/*這裡只針對 student 的原型做了更改*/

// 因為 student 和 person 用的都是同乙個prototype,當子類student 重寫方法的時候,父類同時也會被改寫)

student.prototype.

info

=function()

;// 例項化

let p1 =

newstudent

("張三",16

,"x1002");

let t1 =

newteachers

("老張",26

,"數學");

/*結果可以發現, teachers 的 info 方法也做了更改*/

console.

log(p1.stuno)

;// x1002

p1.info()

;// 學生資訊方法的重寫

t1.info()

;// 學生資訊方法的重寫

console.

log(student.info === person.info)

;// true

針對上述問題的一些改進

組合繼承

// 定義乙個基類函式

function

person

(name, age)

person.prototype.

info

=function()

;// 定義乙個學生類函式

function

student

(name, age, stuno)

// 定義乙個老師類函式

function

teachers

(name, age, major)

// 這可以算是乙個過渡函式

letf

=function()

;f.prototype = person.prototype;

// 通過這個 new 已經重新開闢了一段記憶體,這樣就斷開了原型鏈上面的聯絡,同時保留了 父類函式原型上的方法

student.prototype =

newf()

;teachers.prototype =

newf()

;// 這裡讓我們的 constructor 重新指向 student、teachers

student.prototype.constructor = student;

teachers.prototype.constructor = teachers;

/*這裡只改寫student 上面的info*/

student.prototype.

info

=function()

;let s1 =

newstudent

("小明",16

,"x22201");

let t1 =

newteachers

("老張",28

,"數學");

// 顯然這是改寫之後的結果

s1.info()

;//學生資訊方法的重寫

// 這是原來的味道

t1.info()

;//姓名:老張年齡:28

先來手寫一段深拷貝**

function

deepcopy

(obj)

;for

(let key in obj)

else}}

return newobj;

}

也完全可以採用深拷貝的方式,完成繼承

/*

先說說 序列化出現的一些問題

let obj = };

// 通過序列化實現深拷貝,但是會丟失 undefined 的值 還有 函式

let obj2 = json.parse(json.stringify(obj));

console.log(obj)

console.log(obj2)*/f

.prototype = person.prototype;

student.prototype =

deepcopy

(person.prototype)

;teachers.prototype =

deepcopy

(person.prototype)

;student.prototype.constructor = student;

teachers.prototype.constructor = teachers;

class 語法

class

person

// 針對 class 語法糖, 方法會自動放置到 prototype 上

info()

}let p1 =

newperson

("小敏");

console.

log(p1)

;

js物件導向

物件導向是相對於面向過程而提出的程式設計思想 核心在於通過這種方法的設計出來的程式不再是機械的按照設定的步驟去執行,而是按照需要的步驟去執行。舉個例子 乙個人要吃飯,如果用的面向過程的話就必須執行吃飯前的一切行為,而物件導向則可以跳過之前的環節!建構函式 所謂的工廠方式 用來構造抽象物件,通過呼叫建...

js物件導向

js物件導向 一 什麼是物件 物件可以看成乙個屬性的集合。對像一般有屬性和方法構成,方法的實質是函式,而屬性的實質是變數。二 什麼是物件導向 物件導向可以理解為不需要去了解對像的內部結構,就可以使用它。像我們的date 對像的方法可以獲取和設定時間,但我們並不了解其內部原理。三 物件導向 抽風機 抽...

JS物件導向

一 js物件導向 js是一門指令碼語言,不是物件導向的語言,它沒有類的概念,有物件的概念。物件導向程式設計 oop 和面向過程程式設計 opp 的區別 面向過程以 事件為中心,將完成整個事件拆分成若干個步驟,按照步驟依次執行。物件導向以 事物為中心,完成某個需求需要哪些事物參與,側重點在於每個事物的...