js繼承 原型
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.head{font-size:12px;padding:6px 0 0 10px;}
#login_box{width:300px;height:150px;background:#eee;
border:1px solid #ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;display:none;}
#login_box p{height:20px;border-bottom:1px solid #ccc;font-size:12px;padding:6px 0 0 5px;font-weight:bold;}
#close{width:14px;height:14px;background:url(close.png) no-repeat;position:absolute;right:4px;top:6px;cursor: pointer;background-color: red;}
</style>
<!--<script>
window.onload=function(){
var login_btn=document.getElementById('login'),
login_box=document.getElementById('login_box'),
close=document.getElementById('close');
}
function addEvent(ele,type,hander){
}
function showLogin(){
if(ele.addEventListener){
ele.addEventListener(ele,type,hander)
}
else if(ele.attachEvent){
ele.attachEvent('on'+type,hander)
}
else{
ele['on'+type]=hander;
}
}
</script>-->
</head>
<body>
<div class="head">親，您好！<input type="button" value="登 錄" id="login"></div>
<div id="login_box">
<p>用戶登錄</p ><span id="close">關閉</span>
</div>
<script>
var person = {
age:26,
name:'wang',
say:function (num) {
console.log ("my name is "+this.age+",my name is "+this.name+'.');
//console.log ("my name is "+person.age+",my name is "+person.name+'.');
console.log("傳進一個參數："+num);
}
}
/*
* 上面那個對象 有三個屬性 age name say
* 有一個屬性是方法 如 say
* 如果我們想讀他的age屬性 直接console.log(person.age);
* 如果我們要添加一個新的屬性 如job person.job = "coder";
* if we want to change the property(age),just as : person.age = 29;
* 對於第三個Say 裏面用到了this 這個關鍵字，以後會單講，在這裏你可以理解成 this 就是person 這個對象 但是不建議直接用person
*
* 問題來了：設置person一個新屬性 其爲一個方法，這個方法存一個數字的參數，這個參數爲你想設定的年齡。將person的年齡修改掉，
* 修改後再 調用 person的say 方法。
* */
//person.say(5);
/*
* 以上知識點
* 對象 對象屬性的修改 對象方法的調用 對象中的this 函數參數
* */
function Person(option) {
this.age = option.age;
this.name = option.name;
this.say = function () {
console.log ("my name is "+this.age+",my name is "+this.name+'.');
//console.log ("my name is "+person.age+",my name is "+person.name+'.');
}
}
var person = new Person({age:18,name:'wang'});
person.say();
//爲什麼我們不如下寫？
function Person1(age,name) {
this.age = age;
this.name = name;
this.say = function () {
console.log ("my name is "+this.age+",my name is "+this.name+'.');
//console.log ("my name is "+person.age+",my name is "+person.name+'.');
}
}
/*
* 你可以想如果有非常多的參數名稱，而我們又忘了參數的順序
* */
var person2 = new Person1('wang',18);
person2.say();//這會輸出什麼？你會發現 name 與 age 賦值給反掉了；而用對象則不存在這個問題
//但是如果用對象，我們想給他加一個默認值該怎麼做呢？
function Person3(option) {
option = option || {};
this.age = option.age || 99;
this.name = option.name || 'congjun';
this.say = function () {
console.log ("my name is "+this.age+",my name is "+this.name+'.');
//console.log ("my name is "+person.age+",my name is "+person.name+'.');
}
}
var person3 = new Person3();
person3.say();//你自己測試一下會輸出什麼？
/*
* 注意 || 這是一種 一元判斷 拿 option = option || {};
* 來說 對於等號右邊 如果option存在,就把option 賦值給等號左邊的option 如果不存在 則把{}賦值給等號左邊的option
* */
/*
* 上面的函數叫構造函數
* 函數名首字母要大寫；使用的時候 前面要加一個new關鍵字
* 構造函數內的this 指向構造函數本身
* 普通 函數呢？指向window
*
* 我們可以這個樣子定義一個對象 var a = new Object(); 也可以 var a = {};
* 我們可以這個樣子定義一個數組 var a = new Array(); 也可以 var a = [];
* 我們可以這個樣子定義一個日期 var a = new Date(); 等等
*
* 雖然我們編程中 都採用後者，因爲比較簡單
* 但是你要知道，他們其實都是由構造函數而來
*
* var a = new Object();拿這句來說，a 與 new Object()之間有什麼關係呢？
* a 是 new Object()實例化
*
* 注意如下的表述
*
* a 會有一個__proto__屬性 而構造函數會有一個 prototype屬性
* a 的__proto__ 會繼承 其構造函數的 prototype屬性
* 以上是最簡單的對象繼承。
* 但事情遠沒有結束
*
* 因爲a 的構造函數 有可能會是 某個構造構造函數的 實例
* 而某個構造函數 還可能是其它構造函數的實例
* 這個樣子一層層的存在一個繼承關係
* 最頂端是什麼呢？
* 那就是Object對象，到Object 就結束了
* 層層的繼承像鏈一樣，我們叫原形鏈
* 必須完全搞懂原型繼承及原型鏈的定義。
*
* */
//第三天的題目 用構造函數的方法把第二天的題目做出來z
//主要是this 原型 與 原型鏈h
/*
* 再補充一點
*
* */
function Student() {
this.age = 55;
this.teacher = 'JS';
this.major = 'math';
}
Student.prototype.coderName = "congjun";
var student = new Student();
console.log(student.coderName);//這個coderName屬性就是繼承而來的
//下面的代碼，要理解，對於for in循環不用特別關注，但是功能還有有一些重要
for(var i in student){
console.log("所有屬性包含繼承："+i);
if(student.hasOwnProperty(i)){
console.log("本身自有屬性："+i);
}
}
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
spa頁面，不同組件按需引入js，aliplayer
(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur