(1)構(gòu)造器和類
當(dāng)使用new運(yùn)算符調(diào)用一個(gè)函數(shù)的時(shí)候鼓鲁,它總是返回一個(gè)對(duì)象恳啥,在函數(shù)體內(nèi)部喷面,這個(gè)對(duì)象稱為this,即便在函數(shù)中不做任何特殊的事情星瘾,也會(huì)有this對(duì)象,如果不使用new調(diào)用惧辈,沒(méi)有一條顯式return語(yǔ)句的函數(shù)琳状,都會(huì)返回undefined
注意:在js中,與php一樣,當(dāng)沒(méi)有給構(gòu)造器函數(shù)傳遞參數(shù)時(shí)盒齿,圓括號(hào)是可選的念逞,因此
var son = new farther;
也是有效的
(2)返回對(duì)象(new 一個(gè)對(duì)象的過(guò)程)
當(dāng)使用new調(diào)用任何函數(shù)边翁,會(huì)發(fā)生
1在后臺(tái)自動(dòng)創(chuàng)建一個(gè)“空”的對(duì)象翎承,通過(guò)this引用(指向)該對(duì)象
var this = {};
2任意給this添加屬性
this.name = "weiwei";
3在函數(shù)的末尾,隱式的返回this對(duì)象
return this;
返回對(duì)象將會(huì)導(dǎo)致隱式的this失效符匾,數(shù)組也一樣叨咖,數(shù)組也是對(duì)象
function devil(){
var skills = {
kill:"fireball" //字符串用引號(hào)包裹
};
this.kill = "iceball";
return skills;
}
var satan = new devil(); //不傳參可以不用加圓括號(hào)
console.log(satan.kill); //fireball
js構(gòu)造函數(shù)顯式返回對(duì)象導(dǎo)致原型鏈丟失
返回的任何this以外的內(nèi)容,都將會(huì)導(dǎo)致instanceof運(yùn)算符和constructor屬性無(wú)法像預(yù)期那樣工作
function egg(){
return {
content:"yellow"
};
}
var hen = new egg();
console.log(hen instanceof egg); //false
console.log(hen.constructor === egg); //false
console.log(hen.constructor === Object); // true
(3)遍歷對(duì)象屬性
var weiwei = {
favo:"play basket",
desc:"mild",
high:170
}
for(item in weiwei){
console.log(item + ":" + weiwei[item]);
}
昨天做題竟然遺忘了item就是遍歷的鍵名啊胶,多練多練
(4)值完全相同的對(duì)象不相等
數(shù)組也是對(duì)象甸各,所以嘛
console.log([1,2,3] === [1,2,3]); //false
值相同,引用不同的兩個(gè)數(shù)組(對(duì)象)焰坪,js對(duì)象比較引用趣倾,切記
(5)增強(qiáng)構(gòu)造器(防止遺漏new)
function hero(){
if(!(this instanceof hero)){
return new hero();
}
this.weapon = "gun";
}
var yuefei = new hero();
var james = hero();
console.log(yuefei.weapon);
console.log(james.weapon);
this instanceof hero檢查新創(chuàng)建的this對(duì)象是否是由hero創(chuàng)建的,當(dāng)沒(méi)有使用new某饰,會(huì)指向全局對(duì)象
(6)函數(shù)有prototype屬性儒恋,對(duì)象沒(méi)有
constructor屬性可寫(xiě),因此不可靠
(7)當(dāng)屬性不是一個(gè)有效的標(biāo)識(shí)符的時(shí)候黔漂,方括號(hào)表示法是必需的
//girl.look-like-height = "isgood"; //錯(cuò)誤诫尽,不能用點(diǎn)
girl['look-like-good'] = "beauty";
console.log(girl['look-like-good']);
//console.log(girl['look-like-height']);
(8)js中的點(diǎn)號(hào)
var power = "air force";
var result = "hello".power;
console.log(result); //undefiend
對(duì)字符串使用點(diǎn)操作符,會(huì)將字符串直接量轉(zhuǎn)換為對(duì)象炬守,就好像執(zhí)行了new String('hello'),但是沒(méi)有power屬性箱锐,所以返回undefined
(9)
構(gòu)造函數(shù)實(shí)例化一個(gè)對(duì)象,相當(dāng)于就只是提供了一個(gè)模板劳较,實(shí)例就繼承了構(gòu)造器上的屬性和方法驹止,然后就沒(méi)有構(gòu)造器的事了,就只有隱式原型__proto__來(lái)連接實(shí)例與構(gòu)造器的原型观蜗,也就是實(shí)例取代了構(gòu)造器
構(gòu)造器原型上方法里的this也指向新生成的實(shí)例臊恋,但是方法里嵌套函數(shù),會(huì)導(dǎo)致嵌套函數(shù)里的this指向全局墓捻,也就是window,(在方法里return函數(shù)與定義一個(gè)函數(shù)表達(dá)式抖仅,再調(diào)用一下有什么區(qū)別坊夫?)
(10)對(duì)象沒(méi)有prototype屬性
var haha = {};
haha.prototype.hi = "lalala";
console.log(haha.hi);
(11)函數(shù)執(zhí)行環(huán)境導(dǎo)致的差異
var weapon = {
weapon_type:"arrow",
attack:function(){
return console.log(this.weapon_type);
//錯(cuò)誤:console.log(return this.weapon_type);
}
}
var james = weapon.attack;
james(); //undefined;
var james = weapon.attack;
james.call(weapon); //arrow
(12)實(shí)例化的對(duì)象都指向同一個(gè)構(gòu)造器原型
(13)自由變量
當(dāng)前作用域沒(méi)有定義的變量
方法不僅可以添加在構(gòu)造器的prototype上,也可以直接添加在構(gòu)造器上
function Cat(){ this.eat = function(){} }
(14)原型實(shí)例---對(duì)html節(jié)點(diǎn)進(jìn)行賦值添加事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>原型繼承實(shí)例</title>
</head>
<body>
<div class="hotstone" id="hotstone">我要上傳說(shuō)撤卢,哈哈哈</div>
<script>
function getId(id){
this.element = document.getElementById(id);
//console.log(this.element);
}
getId.prototype.getInnerHtml =function(val){
if(val){
this.element.innerHTML = val;
return this; //為了進(jìn)行鏈?zhǔn)秸{(diào)用环凿,返回的是new出來(lái)的實(shí)例
}else{
return this.element.innerHTML;
}
}
getId.prototype.on =function(type,fn){
this.element.addEventListener(type,fn);
}
var hotstone = new getId('hotstone');
console.log(hotstone.getInnerHtml('西蘭花偉大炮肯定會(huì)上傳說(shuō)'));
console.log(hotstone.getInnerHtml()); //getInnerHtml方法傳值進(jìn)行修改,不傳值進(jìn)行獲取
//因?yàn)間etInnerHtml()返回了this放吩,因此可以進(jìn)行鏈?zhǔn)秸{(diào)用
hotstone.getInnerHtml('8月我一定會(huì)回來(lái)的智听,哈哈哈').on('click',function(){
alert('我被點(diǎn)擊了,岸勺稀到推!');
})
</script>
</body>
</html>