第201天 js 實現繼承的5種方式

1
//建構函式
2function
people()
5people.prototype=9}
1011
/*學生物件
*/12
function
student(name, skin) 
17//
例項化 
18var zhangsan = new student('張三', '黃**')
19     console.log(zhangsan.name); //
張三20     console.log(zhangsan.race); //
漢族21     zhangsan.eat();//
報錯22
//原因：無法繼承person原型物件中的方法

1
//基類
2var
person= function()6
person.prototype=10}
1112
13//
建構函式
14var
student= function
(name,age,***)
17//
學生繼承person,則擁有person原型中的方法
18student.prototype= new
person();
19     student.prototype.getteacher = function
()22
23//
測試 -- 學生類擁有了person中的方法
24var xiaowang = new student('小王',10,'男');
25//
xiaowang.name = '張三'
26     console.log(xiaowang.name);//
張三27     xiaowang.say();//
person.prototype - say
28     xiaowang.getteacher();//
student.prototype.getteacher
2930
3132
/*存在的問題
*/33
/*無法通過傳引數定義物件
*/34     console.log(xiaowang.name);//
張三35     console.log(xiaowang.age);//
2036
3738
/*解決方式
*/39     xiaowang.name = '小明';
40     xiaowang.age = 22;
41     console.log(xiaowang.name);//
小明42     console.log(xiaowang.age);//
22

1
function
person(name, age) 
5person.prototype.say = function
() 8910
function
student(name, age, no) 
16student.prototype= new
person();
17var stu1 = new student("小明",22,123);
18     console.log(stu1.name);//
小明19     console.log(stu1.say());//
我是小明
20     console.log(stu1.no);//
123

1
/*繼承的固定函式*/2
function
inheritprototype(subtype,supertype)78
function
person(name)
11     person.prototype.say= function
()14
15function
student(name,age)
1920
inheritprototype(student,person);
21var xiaozhang = new student('小張',20);
22     console.log(xiaozhang.name);//
小張23     xiaozhang.say();//
我是小張

1
var chinese = ;
2var doctor =34
//請問怎樣才能讓"醫生"去繼承"中國人"，也就是說，我怎樣才能生成乙個"中國醫生"的物件？5//
這裡要注意，這兩個物件都是普通物件，不是建構函式，無法使用建構函式方法實現"繼承"。67
8function
extend(p) ;
10for (var i in
p) 13         c.uber =p;
14return
c;15}16
1718
var doctor =extend(chinese);
19     doctor.career = '醫生';
20     alert(doctor.nation); //
中國

1
var sharp = function
(name)
4 sharp.prototype =9//
會根據不同的形狀而被重寫
10         ,zhouchang : function
()13
};14
1516
//矩形物件
17var rectangle = function
(length,width)
23//
重寫計算周長的方法
24 rectangle.prototype = new
sharp();
25 rectangle.prototype.zhouchang = function
()28
2930
//好處
31//
以後新增乙個計算其他形狀的需求,不用修改原來的**,只需要擴充即可.
32//
新增乙個正方形
33var square  = function
(length)
39//
重寫計算周長的方法
40 square.prototype = new
sharp();
41 square.prototype.zhouchang = function
()44
4546
//新增乙個圓形
47var circle   = function
(radius)
5354
//重寫計算周長的方法
55 circle.prototype = new
sharp();
56 circle.prototype.zhouchang = function
()60
6162
63//
使用物件 封裝
64function
computezhouchang(shape) 
6768
//組裝世界
69//
var rectangle = new rectangle('矩形',10,20);
70//
computezhouchang(rectangle);
7172
//去掉屬性name
73var rectangle = new rectangle(10,20);
74computezhouchang(rectangle);
7576
//正方形
77var square = new square(10);
78computezhouchang(square);
7980
//圓形
81var circle = new circle(10);
82 computezhouchang(circle);

js實現繼承的5種方式

js是門靈活的語言，實現一種功能往往有多種做法,ecmascript沒有明確的繼承機制，而是通過模仿實現的，根據js語言的本身的特性,js實現繼承有以下通用的幾種方式 1.使用物件冒充實現繼承該種實現方式可以實現多繼承實現原理讓父類的建構函式成為子類的方法,然後呼叫該子類的方法,通過this關...

第201天 js 實現繼承的5種方式

js實現繼承的5種方式

js實現繼承的5種方式

js實現繼承的5種方式

相關推薦