原創作品，轉載請註明來源， "sogeisetsu" ,我的csdn上也有這篇文章 "csdn" js屬性，封裝性，prototype綜合解析 用實例來解釋以下js的公有屬性，靜態屬性，實例屬性，prototype和封裝性 下麵是我在寫博客的源代碼，您可以先不要看他，先看下麵的文字部分 先搞清楚原型 ...
原創作品，轉載請註明來源，sogeisetsu,我的csdn上也有這篇文章csdn
js屬性，封裝性，prototype綜合解析
用實例來解釋以下js的公有屬性，靜態屬性，實例屬性，prototype和封裝性
下麵是我在寫博客的源代碼，您可以先不要看他，先看下麵的文字部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js屬性</title>
<script>
//先構造一個函數
//先搞清楚原型鏈
function qust() {
this.name="university";//這是公有屬性
this.age=12;
//這是共有方法
this.run=function () {
console.log("have ran");
};
let age="12";//這是私有屬性
//這是私有方法
function go() {
console.log("have gone");
}
}
//先創建一個實例對象
let shili=new qust();
//構造函數的原型對象通過prototype來調用
console.log(qust.prototype);//列印原型對象，列印結果是object
//註意，這個時候還沒有改變原型對象
console.log(qust.prototype.constructor);//列印原型對象的constructor
/*列印結果是如下
ƒ qust() {
this.name="university";//這是公有屬性
this.age=12;
//這是共有方法
this.run=function () {
console.log("have ran");
};
…
* */
console.log(qust);//列印構造函數
/*結果如下
* ƒ qust() {
this.name="university";//這是公有屬性
this.age=12;
//這是共有方法
this.run=function () {
console.log("have ran");
};
…*/
console.log(qust === qust.prototype.constructor);//true,原型對象的constructor指向構造函數
//但是，如果我們修改了qust.prototype(原型對象)，qust.prototype.constructor還指向構造函數嗎？
qust.prototype={//prototype保存一些構造函數共有的屬性，來節省記憶體
type:"人類",
typerun:function () {
console.log('人類');
}
};
console.log(qust === qust.prototype.constructor);//false,不相等了。
// 註意點: 為了不破壞原有的關係, 在給prototype賦值的時候, 需要在自定義的對象中手動的添加constructor屬性, 手動的指定需要指向誰
qust.prototype={//prototype保存一些構造函數共有的屬性，來節省記憶體
constructor:qust,//不帶括弧
setype:"人類",
typerun:function () {
console.log('人類');
}
};
console.log(qust === qust.prototype.constructor);//true
/*
1.對象中__proto__組成的鏈條我們稱之為原型鏈
2.對象在查找屬性和方法的時候, 會先在當前對象查找
如果當前對象中找不到想要的, 會依次去上一級原型對象中查找
如果找到Object原型對象都沒有找到, 就會報錯
*/
// 放個圖就明白了
let shi=new qust();//由於修改了一些東西，所以新創建一個對象
console.log(shi.setype);//列印在原型對象中定義的值，結果是人類
shi.setype="新人類";
console.log(shi.setype);//新人類
console.log(shi.__proto__);/*{setype: "人類", constructor: ƒ, typerun: ƒ}*/
console.log(shi.__proto__.setype);//人類
console.log(qust.prototype.setype);//人類
console.log(shi.__proto__===qust.prototype);//true
// 註意點: 在給一個對象不存在的屬性設置值的時候, 不會去原型對象中查找, 如果當前對象沒有就會給當前對象新增一個不存在的屬性
/*
1.在JavaScript中屬性和方法分類兩類
1.1實例屬性/實例方法
在企業開發中通過實例對象訪問的屬性, 我們就稱之為實例屬性
在企業開發中通過實例對象調用的方法, 我們就稱之為實例方法
1.2靜態屬性/靜態方法
在企業開發中通過構造函數訪問的屬性, 我們就稱之為靜態屬性
在企業開發中通過構造函數調用的方法, 我們就稱之為靜態方法
*/
//先看一下原先設置的qust
/*function qust() {
this.name="university";//這是公有屬性
this.age=12;
//這是共有方法
this.run=function () {
console.log("have ran");
};
let age="12";//這是私有屬性
//這是私有方法
function go() {
console.log("have gone");
}
}
* */
//上面的屬性或方法都是通過創建實例對象才能訪問或調用，所以我們叫他實例屬性或實例方法
qust.school="qust";//這是一個靜態屬性，通過構造函數來訪問
console.log(qust.school);//qust
//定義一個方法
qust.getschool=function () {
console.log("qust is my school");
}//這是通過構造函數訪問的方法，我們稱其為靜態方法
qust.getschool()//調用靜態方法
//qust is my school
//封裝性
//防止混亂構造一個新函數newqust
function newqust() {
this.name="university";//這是公有屬性
this.age=12;
//以下是修改內容
let myage=19;//設置一個私有年齡，這是在函數外面無法修改的
this.setnewage=function (newage) {
if(newage>=0){
myage=newage;
}
};
//我們還需要一個來調用年齡
this.getage=function () {
return myage;
};
//這是共有方法
this.run=function () {
console.log("have ran");
};
let age="12";//這是私有屬性，只能在該函數里訪問，在外無法訪問，這就為我們的封裝性提供了可能
//這是私有方法
function go() {
console.log("have gone");
}
}
//試一下調用私有屬性
console.log(newqust.age);//undefined
/*
* 假設一個場景，讓用戶設置自己的年齡，年齡嗎肯定大於零的，但是通過公有屬性卻而已隨意設置*/
let newshili=new newqust();
newshili.age=-2;
console.log(newshili.age);//-2,這是荒誕的
//所以需要修改
newshili.setnewage(15);
console.log(newshili.getage());//15
</script>
</head>
<body>
</body>
</html>先搞清楚原型鏈，prototype
先構造一個函數
function qust() {
this.name="university";//這是公有屬性
this.age=12;
//這是共有方法
this.run=function () {
console.log("have ran");
};
let age="12";//這是私有屬性
//這是私有方法
function go() {
console.log("have gone");
}
}先創建一個實例對象來調用構造函數中的屬性
let shili=new qust();構造函數的原型對象通過prototype來調用
console.log(qust.prototype);//列印原型對象，列印結果是object註意，這個時候還沒有改變原型對象
console.log(qust.prototype.constructor);//列印原型對象的constructorqust.prototype.constructor是指向構造函數qust的。
所以
