JS高階教程知識整理 13繼承模式

2021-10-05 22:41:38 字數 3309 閱讀 8988

01.原型鏈繼承

方式一: 原型鏈繼承

1.套路

1.定義父型別建構函式

2.給父型別的原型新增方法

3.定義子型別建構函式

4.建立父型別的物件賦值給子型別的原型

5.將子型別的構造屬性設定為子型別

6.給子型別原型新增方法

7.建立子型別的物件,可以呼叫父型別的方法

2.關鍵

1.子型別的原型為父型別的乙個實際物件

實現**:

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

原型鏈繼承title

>

head

>

>

>

//父型別

function

supper()

supper.prototype.

showsupperprop

=function()

//子型別

function

sub(

)//子型別的原型為父型別的乙個例項物件

sub.prototype =

newsupper()

//讓子型別的原型的constructor指向子型別(建構函式)

sub.prototype.constructor = sub

sub.prototype.

showsubprop

=function()

var sub =

newsub()

sub.

showsupperprop()

//能執行說明有繼承

sub.

tostring()

//能夠訪問,查詢順序:sub--->sub.prototype(object例項)--->object原型物件 //tostring() 是 object原型物件 上的方法

//如果不加sub.prototype.constructor = sub

console.

log(sub.constructor)

//會指向supper(錯誤) //constructor是原型物件上的屬性,而現在的原型物件是new supper()的例項,去讀constructor讀的是supper

console.

log(sub)

//(**)看constructor在**,sub--->supper--->object

script

>

body

>

html

>

02.借用建構函式繼承

方式2: 借用建構函式繼承(假的)

1.套路:

1.定義父型別建構函式

2.定義子型別建構函式

3.在子型別建構函式中呼叫父型別構造

2.關鍵

1.在子型別建構函式中呼叫call()呼叫父型別建構函式

實現**:

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

借用建構函式繼承(假的)title

>

head

>

>

>

function

person

(name, age)

function

student

(name, age, price)

var s =

newstudent

('tom',12

,120000

) console.

log(s.name, s.age, s.price)

script

>

body

>

html

>

03.組合繼承

實現**:

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

組合繼承title

>

head

>

>

>

function

person

(name, age)

person.prototype.

setname

=function

(name)

function

student

(name, age, price)

student.prototype =

newperson()

//為了能看到父型別的方法,所以建立例項的時候不需要傳入引數

student.prototype.constructor = student //修正constructor屬性

student.prototype.

setprice

=function

(price)

var s1 =

newstudent

('kate',26

,12000

) s1.

setname

('yue'

) s1.

setprice

(16000

) console.

log(s1.name, s1.age, s1.price)

script

>

body

>

html

>

JS高階教程知識整理 07函式中的this

1.this是什麼 任何函式本質上都是通過某個物件來呼叫的,如果沒有直接指定就是window 所有函式內部都有乙個變數this 它的值是呼叫函式的當前物件 2.如何確定this的值 test window new test 新建立的物件 p.test p p.call obj obj 實現 lang...

js高階整理

var stu 工廠方式建立 var stu1 student zs 20 var stu2 student ls 13 建構函式方式 如果是建構函式,函式名一般大寫。function student name,age 例項化物件 var stu newstudent zs 20 var stu2 ...

js 高階知識

1 caller 表示呼叫該函式的函式 function fun1 function fun2 fun2 11,22 11 2 function foo var foo new foo var p foo.prototype foo.prototype alert foo.constructor a...