|
構(gòu)造函數(shù)： function Foo(name,age){ this.name=name; this.age=age; this.class='class-1'; } var f=new Foo('cyy',18);
構(gòu)造函數(shù)--擴(kuò)展： 所有的引用類型都是構(gòu)造函數(shù) var a={} 是 var a=new Object() 的語法糖 var a=[] 是 var a=new Array() 的語法糖 function Foo() 是var Foo=new Function() 的語法糖
使用instanceof 判斷一個(gè)函數(shù)是否是一個(gè)變量的構(gòu)造函數(shù)
5條原型規(guī)則： 1、所有的引用類型（數(shù)組，對象，函數(shù)），都具有對象的特性，即可自由擴(kuò)展屬性，除了null var a={}; a.name="aa"; console.log(a); var b=[]; b.name='bb'; console.log(b); function c(){} c.name='cc'; console.log(c);
2、所有的引用類型（數(shù)組，對象，函數(shù)），都有一個(gè)__proto__屬性（隱式原型），其屬性值是一個(gè)普通的對象
<script> var a={}; var b=[]; function c(){} console.log(a.__proto__); console.log(b.__proto__); console.log(c.__proto__); </script>
3、所有的函數(shù)，都有一個(gè)prototype屬性（顯示原型），屬性值也是一個(gè)普通的對象 4、所有的引用類型，__proto__屬性值指向它的構(gòu)造函數(shù)的prototype屬性值 5、當(dāng)試圖得到一個(gè)對象的屬性時(shí)，如果這個(gè)對象本身沒有這個(gè)屬性，就會(huì)去它的__proto__里找（其構(gòu)造函數(shù)的prototype屬性中） <script> function Foo(name,age){ this.name=name; this.age=age; } Foo.prototype.alertName=function(){ alert(this.name); } var f=new Foo('cyy',18); f.alertName(); </script>
<script> function Foo(name,age){ this.name=name; this.age=age; } Foo.prototype.alertName=function(){ alert(this.name); } var f=new Foo('cyy',18); f.consoleName=function(){ console.log(this.name); } var item; for(item in f){ //高級瀏覽器會(huì)屏蔽來自原型的屬性 //但還是建議加上這個(gè)判斷，保持程序的健壯性 if(f.hasOwnProperty(item)){ console.log(item); } } </script>
<script> function Foo(name,age){ this.name=name; this.age=age; } Foo.prototype.alertName=function(){ alert(this.name); } var f=new Foo('cyy',18); f.consoleName=function(){ console.log(this.name); } var item; for(item in f){ //高級瀏覽器會(huì)屏蔽來自原型的屬性 //但還是建議加上這個(gè)判斷，保持程序的健壯性 if(f.hasOwnProperty(item)){ console.log(item); } } //f沒有toString方法，會(huì)去Foo上找 //Foo沒有toString方法，會(huì)去Object上找 //Object如果也沒有，就是null f.toString(); </script>
<script> function Obj(name){ this.name=name; } var o=new Obj(); console.log(o.toString()); </script>
instanceof 判斷引用類型屬于哪個(gè)構(gòu)造函數(shù)的方法 <script> function Foo(name,age){ this.name=name; this.age=age; } Foo.prototype.alertName=function(){ alert(this.name); } var f=new Foo('cyy',18); f.consoleName=function(){ console.log(this.name); } console.log(f instanceof Foo); console.log(f instanceof Object); </script>
如何判斷一個(gè)變量是數(shù)組類型？ <script> var a=[]; console.log(a instanceof Array); </script>
寫一個(gè)原型鏈繼承的實(shí)例： <script> function Animal(){ this.eat=function(){ console.log('animal eat'); } } function Dog(){ this.bark=function(){ console.log('dog bark'); } } Dog.prototype=new Animal(); var d=new Dog(); d.eat(); d.bark(); </script>
描述new一個(gè)對象的過程： 1、創(chuàng)建一個(gè)新對象 2、將this指向這個(gè)對象 3、給this賦值 4、返回這個(gè)對象
一個(gè)原型鏈繼承的實(shí)例： 封裝DOM查詢 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,min-width=1.0,max-width=1.0,initial-scale=1.0,user-scalable=no"> <title>demo</title> </head> <body> <div id="text">這是一段長長的文本</div> <script> function Ele(id){ this.elem=document.getElementById(id); } Ele.prototype.html=function(val){ var elem=this.elem; if(val){ //設(shè)置innerHTML elem.innerHTML=val; return this; }else{ //獲取innerHTML return elem.innerHTML; } } Ele.prototype.on=function(type,fn){ this.elem.addEventListener(type,fn);
|
|
|
