面相对象(二)
原型鏈：實(shí)例對(duì)象與原型之間的連接，叫做原型鏈
原型鏈的最外層 : Object.prototype
function Aaa(){
//構(gòu)造函數(shù)
}
Aaa.prototype.num=30p; //擴(kuò)展原型方法
var a1=new Aaa();? //創(chuàng)建對(duì)象
原型檢測(cè)相關(guān)：
hasOwnProperty:看是不是對(duì)象自身的屬性
具體概念：用來(lái)判斷一個(gè)對(duì)象是否有你給出名稱的屬性或?qū)ο?#xff0c;不過(guò)需要注意：次方法無(wú)法檢測(cè)到原型鏈中是否具有該屬性，該屬性必須是對(duì)象本身的一個(gè)成員
1 var arr=[]; 2 arr.num=10; 3 Array.prototype.num2=20; 4 console.log(arr.hasOwnProperty('num'));//true 5 console.log(arr.hasOwnProperty('num2'));//false?isPrototypeOf:是用來(lái)判斷原型鏈對(duì)象是否存在指定對(duì)象實(shí)例中，則返回true,否則返回false
?constructor? 屬性返回對(duì)創(chuàng)建此對(duì)象的數(shù)組函數(shù)的引用
1 function Aaa(){ 2 3 } 4 var a1=new Aaa(); 5 alert(a1.constructor);//function Aaa(){}? function Aaa(){
? }
? alert(Aaa.prototype.constructor==Aaa); //true 每一個(gè)函數(shù)都會(huì)自動(dòng)生成的
Object.constructor
我們?cè)诙x函數(shù)的時(shí)候，函數(shù)定義的時(shí)候函數(shù)本身就會(huì)默認(rèn)有一個(gè)prototype的屬性，
而我們?nèi)绻胣ew 運(yùn)算符來(lái)生成一個(gè)對(duì)象的時(shí)候就沒(méi)有prototype屬性。我們來(lái)看一個(gè)例子，來(lái)說(shuō)明這個(gè)
1 function a(c){ 2 this.b = c; 3 this.d =function(){ 4 alert(this.b); 5 } 6 } 7 var obj = new a('test'); 8 alert(typeof obj.prototype);//undefine 9 alert(typeof a.prototype);//objecta.prototype 包含了2個(gè)屬性，一個(gè)是constructor ，另外一個(gè)是__proto__
這個(gè)constructor ?就是我們的構(gòu)造函數(shù)a，這個(gè)也很容易理解。
那么__proto__ 是什么呢？
這就涉及到原型鏈的概念
每個(gè)對(duì)象都會(huì)在其內(nèi)部初始化一個(gè)屬性，就是__proto__,當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象的屬性時(shí)，如果對(duì)象內(nèi)部不存在
這個(gè)屬性就會(huì)到__proto__里找這個(gè)屬性，這個(gè)__proto__又會(huì)有自己的__proto__，于是一直走下去。
obj.__proto__===a.prototype //true
同理，這里我們分析出new運(yùn)算符做了那些事情
1.var obj={};? ?也就是說(shuō)初始化一個(gè)對(duì)象obj
2.obj.__proto__=a.prototype;
3.a.call(obj) 也就是構(gòu)造obj，也可以稱為初始化obj
?instanceof:對(duì)象與構(gòu)造函數(shù)在原型鏈上是否有關(guān)系
1 function Aaa(){ 2 } 3 4 var a1 = new Aaa(); 5 6 alert( a1 instanceof Object ); //true 7 8 var arr = []; 9 10 alert( arr instanceof Array );toString() :系統(tǒng)對(duì)象下面都是自帶的，自己寫(xiě)的對(duì)象通過(guò)原型鏈找object下面的
將邏輯值轉(zhuǎn)換成字符串
繼承：子類(lèi)不影響父類(lèi)，子類(lèi)可以繼承父類(lèi)的一些功能
屬性的繼承：調(diào)用父類(lèi)的構(gòu)造函數(shù)call
方法的繼承： for? in ：拷貝繼承（jquery也是采用拷貝繼承extend）
<style> #div1{ width:100px; height:100px; background:red; position:absolute;} #div2{ width:100px; height:100px; background:yellow; position:absolute; left:100px;} </style> <script> window.onload=function(){var d1=new Drag('div1');d1.init();var d2=new ChildDrag('div2');d2.init(); }function Drag(id){this.obj=document.getElementById(id);this.disX=0;this.disY=0; } Drag.prototype.init=function(){var This=this;this.obj.onmousedown = function(ev){var ev = ev || window.event;This.fnDown(ev);document.onmousemove = function(ev){var ev = ev || window.event;This.fnMove(ev);};document.onmouseup = function(){This.fnUp();};return false;}; }; Drag.prototype.fnDown = function(ev){this.disX = ev.clientX - this.obj.offsetLeft;this.disY = ev.clientY - this.obj.offsetTop; }; Drag.prototype.fnMove = function(ev){this.obj.style.left = ev.clientX - this.disX + 'px';this.obj.style.top = ev.clientY - this.disY + 'px'; }; Drag.prototype.fnUp = function(){document.onmousemove = null;document.onmouseup = null; };function ChildDrag(id){ //子類(lèi)Drag.call(this,id);//這個(gè)this指LimitDrag new的對(duì)象 }extend(ChildDrag.prototype,Drag.prototype);//實(shí)現(xiàn)繼承父類(lèi)方法 function extend(obj1,obj2){for(var attr in obj2){obj1[attr] = obj2[attr];} } </script> </head><body> <div id="div1"></div> <div id="div2"></div>?js沒(méi)有類(lèi)的概念，把JS中的構(gòu)造函數(shù)看做類(lèi)
要做屬性和方法繼承的時(shí)候要分開(kāi)繼承? ? ?類(lèi)式繼承
1 //類(lèi)：JS是沒(méi)有類(lèi)概念的，把JS中的構(gòu)造函數(shù)看做類(lèi) 2 //類(lèi)式繼承：利用構(gòu)造函數(shù)（類(lèi)）繼承的方式 3 function Aaa(){ 4 this.name=[1,2,3]; 5 } 6 Aaa.prototype.showName=function(){ 7 alert(this.name); 8 } 9 10 function Bbb(){ //子類(lèi) 11 Aaa.call(this); 12 } 13 //這四句必須的 14 var F=function(){}; 15 F.prototype=Aaa.prototype; 16 Bbb.prototype=new F();//直接復(fù)制把所有東西度覆蓋了 17 Bbb.prototype.constructor=Bbb; //修正指向問(wèn)題 18 var b1=new Bbb(); 19 b1.name.push(4); 20 alert( b1.name );//1,2,3,4 21 var b2 = new Bbb(); 22 23 alert( b2.name );//1,2,3?原型繼承
1 //原型繼承: 無(wú)new的對(duì)象 2 var a={ 3 name:'小明' 4 }; 5 var b=cloneobj(a); 6 alert(b.name); 7 function cloneobj(obj){ 8 var F=function(){}; 9 F.prototype=obj; 10 return new F(); 11 }?
轉(zhuǎn)載于:https://www.cnblogs.com/zhihou/p/8108737.html
總結(jié)
- 上一篇： 正负值地处理以及添加回调函数小案例
- 下一篇： 分页原理+软件架构师