JS定義類(lèi)和屬性，封裝繼承和多態(tài)，保護(hù)屬性，私有屬性，作業(yè)，friendly【詩(shī)書(shū)畫(huà)唱】
目錄（下面的詞條是按順序的，想看一個(gè)詞條的結(jié)尾，就CTRL+F下一個(gè)詞條）：
（第1，2，3題）創(chuàng)建一個(gè)Person類(lèi)，包含name公開(kāi)的屬性，age受保護(hù)的屬性，這個(gè)值只能是數(shù)字，私有的屬性account。
創(chuàng)建一個(gè)showMoney私有的方法，在這個(gè)方法中打印出account的值。
創(chuàng)建一個(gè)showMsg公開(kāi)的方法，在這個(gè)方法中打印出name和age，并且調(diào)用showMoney方法。
我寫(xiě)的題目答案：第1，2，3題.html
（第4題）創(chuàng)建一個(gè)交通類(lèi)Trafic和它的兩個(gè)子類(lèi)Car和Bike，通過(guò)多態(tài)實(shí)現(xiàn)每種交通工具的run方法。
我寫(xiě)的題目答案：第4題（代碼多的方法）.html
我寫(xiě)的題目答案：第4題（代碼少的方法）.html
個(gè)人筆記
friendly
實(shí)例代碼
定義類(lèi)和屬性.html
多態(tài).html
封裝繼承和多態(tài).html
注釋?zhuān)?/strong>
同色的“
個(gè)人筆記
friendly”
表示“friendly”詞條在“個(gè)人筆記”詞條里面
（第1，2，3題）創(chuàng)建一個(gè)Person類(lèi)，包含name公開(kāi)的屬性，age受保護(hù)的屬性，這個(gè)值只能是數(shù)字，私有的屬性account。
創(chuàng)建一個(gè)showMoney私有的方法，在這個(gè)方法中打印出account的值。
創(chuàng)建一個(gè)showMsg公開(kāi)的方法，在這個(gè)方法中打印出name和age，并且調(diào)用showMoney方法。
我寫(xiě)的題目答案：第1，2，3題.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
//創(chuàng)建Person類(lèi)
var Person = function(name,age,account){
//定義一個(gè)公有的屬性：
this.name = name;
//定義一個(gè)公有的方法：
this.showMsg= function(){
//打印出name和age，并且調(diào)用showMoney方法:
console.log('name：'+name+"，age："+age);
showMoney();
}
//定義一個(gè)受保護(hù)的屬性age ：
Object.defineProperty(this,'age',{
get: function(){
console.log('調(diào)用了get方法');
return 'age的值是：' + age;
},
set: function(val){
console.log('調(diào)用了set方法');
//用if判斷限制這個(gè)值只能是數(shù)字：
if(!isNaN(val)) {
age = val;
}
}
});
//定義了一個(gè)私有的屬性account：
//私有的屬性在類(lèi)的外部是無(wú)法訪問(wèn)的：
var _account= account;
//私有方法在類(lèi)的外部是無(wú)法訪問(wèn)的：
var showMoney= function(){
console.log(_account);
}
//在類(lèi)的內(nèi)部調(diào)用私有方法:
showMoney();
}
var p= new Person('詩(shī)書(shū)畫(huà)唱',9,999.9);
? ? ? ? ??
//調(diào)用set方法(使用"點(diǎn)"和"賦值"）（這里的set方法可以不調(diào)用，要修改age值時(shí)才調(diào)用）：? ? ? ? ? ?
?p.age = 9;
?
?//調(diào)用get方法(使用"控制臺(tái)打印"和"點(diǎn)")：
?console.log(p.age);
//私有的屬性在類(lèi)的外部是無(wú)法訪問(wèn)的,所以這里控制臺(tái)打印的結(jié)果是undefined：
?console.log(p.account);
?//在類(lèi)外部調(diào)用公有方法：
p.showMsg();
</script>
<body>
</body>
</html>
（第4題）創(chuàng)建一個(gè)交通類(lèi)Trafic和它的兩個(gè)子類(lèi)Car和Bike，通過(guò)多態(tài)實(shí)現(xiàn)每種交通工具的run方法。
我寫(xiě)的題目答案：第4題（代碼多的方法）.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
//封裝：
Object.copy = function(des,src){
for(var attr in src) {
des[attr] = src[attr];
}
return des;
};
Object.prototype.extend = function(o){
? ? ? ? ? ? return Object.copy(this,o);
? ? ? ? ? ? }
//定義父類(lèi)：
? var Trafic = function(){};
??
? ? ? ? ? ? Trafic.prototype = {
? ? ? ? ? ? go: function(){
? ? ? ? ? ?
? ? ? ? ? ? this.run();
? ? ? ? ? ? },
? ? ? ? ? ? run: function(){}
? ? ? ? ? ? };
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ? ??
?//定義子類(lèi)繼承父類(lèi)：
?//Car繼承Trafic：
? ? ? ? ? ? var Car = function(){};
? ? ? ? ? ? var fuLei = new Trafic();
? ? ? ? ? ? var duoTaiFangFa = {
? ? ? ? ? ? run: function(){
? ? ? ? ? ? console.log('Car中調(diào)用run方法');
? ? ? ? ? ? }
? ? ? ? ? ? };
? ? ? ? ? ? Car.prototype = fuLei.extend(duoTaiFangFa);
? ? ? ? ? ??
?//多態(tài)調(diào)用方法：
? ? ? ? ? ? var r = new Car();
? ? ? ? ? ? r.go(); ? ? ? ? ? ?
? ? ? ? ? ??
? ? ? ? ? ??
? ? //Bike繼承Trafic：? ? ? ? ?
? ? ? ? ? ? ?var Bike= function(){};
? ? ? ? ? ? var fuLei = new Trafic();
? ? ? ? ? ? var duoTaiFangFa= {
? ? ? ? ? ? run: function(){
? ? ? ? ? ? console.log('Bike中調(diào)用run方法');
? ? ? ? ? ? }
? ? ? ? ? ? };
? ? ? ? ? ? Bike.prototype = fuLei.extend(duoTaiFangFa);
? ? //多態(tài)調(diào)用方法：
? ? ? ? ? ? var r = new Bike();
? ? ? ? ? ? r.go(); ? ? ? ??
</script>
<body>
</body>
</html>
我寫(xiě)的題目答案：第4題（代碼少的方法）.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
//父類(lèi)：
var Trafic = function(type){
type.run();
}
//子類(lèi)：
var Car = function(){};
Car.prototype.run = function(){
console.log('Car中調(diào)用run方法');
}
//調(diào)用：
Trafic(new Car());
//子類(lèi)：
var Bike = function(){};
Bike.prototype.run = function(){
console.log('Bike中調(diào)用run方法');
}
//調(diào)用：
Trafic(new Bike());
</script>
<body>
</body>
</html>
個(gè)人筆記
訪問(wèn)權(quán)限修飾符權(quán)限從高到低排列是public? ,protected? ,friendly, private。
實(shí)例代碼
定義類(lèi)和屬性.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//創(chuàng)建了一個(gè)Animal類(lèi)
var Animal = function(name,type,color){
//定義了一個(gè)private _type
//_type在Animal類(lèi)的外部是無(wú)法訪問(wèn)的
var _type = type;
//私有的方法
//isAnimal方法在Animal類(lèi)的外部是無(wú)法訪問(wèn)的
var isAnimal = function(){
console.log(_type === 'animal');
}
isAnimal();
//定義一個(gè)受保護(hù)的屬性name
Object.defineProperty(this,'name',{
get: function(){
//在這里可以寫(xiě)一段判斷邏輯，來(lái)保護(hù)name屬性不會(huì)被隨便獲取到
console.log('調(diào)用了get方法');
return '動(dòng)物的名字是：' + name;
},
set: function(val){
console.log('調(diào)用了set方法');
if(val) {
name = val;
}
}
});
//定義一個(gè)公有的屬性和方法
this.color = color;
this.eat = function(){
console.log('正在吃東西');
}
this.age = 5;
}
Animal.prototype.age = 2;
Animal.prototype.play = function(){
console.log('正在玩耍');
}
//定義Animal類(lèi)的靜態(tài)的屬性和方法
Animal.total = 47;
Animal.count = function(){
return Animal.total;
}
//創(chuàng)建一個(gè)Animal對(duì)象
var cat = new Animal('大黃','貓','黃色');
cat.name = '花花';
console.log(cat.name);
console.log(cat.color);
cat.eat();
console.log(cat.age);
cat.play();
console.log(Animal.total);
console.log(Animal.count());
</script>
</head>
<body>
</body>
</html>
多態(tài).html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var shape = function(type){
type.draw();
}
var Rect = function(){};
Rect.prototype.draw = function(){
console.log('矩形');
}
shape(new Rect());
var Circle = function(){};
Circle.prototype.draw = function(){
console.log('圓形');
}
shape(new Circle());
</script>
</head>
<body>
</body>
</html>
封裝繼承和多態(tài).html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//給Object類(lèi)定義了一個(gè)靜態(tài)的方法
//將src對(duì)象中的屬性和方法復(fù)制到des對(duì)象中去
Object.copy = function(des,src){
for(var attr in src) {
des[attr] = src[attr];
}
return des;
};
var father = {
money: 200000,
house: 1,
work: function(){
console.log('正在工作');
}
};
var son = {
name: '小明'
}
// var s = Object.copy(son,father);
// console.log(s);
? ? ? ? ? ? Object.prototype.extend = function(o){
? ? ? ? ? ? return Object.copy(this,o);
? ? ? ? ? ? }
? ? ? ? ? ? var s = son.extend(father);
? ? ? ? ? ? //console.log(s);
? ? ? ? ? ??
? ? ? ? ? ? var Shape = function(){};
? ? ? ? ? ? Shape.prototype = {
? ? ? ? ? ? draw: function(){
? ? ? ? ? ? //通過(guò)調(diào)用_d空方法來(lái)實(shí)現(xiàn)多態(tài)
? ? ? ? ? ? this._d();
? ? ? ? ? ? },
? ? ? ? ? ? _d: function(){}
? ? ? ? ? ? };
? ? ? ? ? ? //定義了一個(gè)矩形類(lèi)繼承Shape
? ? ? ? ? ? var Rect = function(){};
? ? ? ? ? ? var sp = new Shape();
? ? ? ? ? ? var f = {
? ? ? ? ? ? _d: function(){
? ? ? ? ? ? console.log('繪制一個(gè)矩形');
? ? ? ? ? ? }
? ? ? ? ? ? };
? ? ? ? ? ? Rect.prototype = sp.extend(f);
? ? ? ? ? ? //多態(tài)調(diào)用draw方法
? ? ? ? ? ? var r = new Rect();
? ? ? ? ? ? r.draw();
? ? ? ? ? ??
//? ? ? ? ? var Circle = function(){};
//? ? ? ? ? Circle.prototype = sp.extend({
//? ? ? ? ? _d: function(){
//? ? ? ? ? console.log('繪制一個(gè)圓形');
//? ? ? ? ? }
//? ? ? ? ? });
//? ? ? ? ? var c = new Circle();
//? ? ? ? ? c.draw();
</script>
</head>
<body>
</body>
</html>
