JS 高階篇
阿新 • • 發佈:2018-11-03
1. Function 物件
Java的方法僅僅是方法,但是JS的方法是一個物件,可以作為引數!
- Function 物件引入
- Function 是 js 的方法物件,可以用 Function 例項化出任何 js 方法物件;
- 用 Function 建立方法物件
- Function 物件屬性
- Function 物件方法
2. JavaScript 閉包
- Js 變數的作用域
- 方法體外定義 ( var a=22; ),全域性變數,所有方法可以取到
- 方法體內定義 ( var a=22; ),區域性變數,外部方法不可以取到
- 方法體內定義 ( a=22; ),全域性變數,所有方法可以取到
- 從外部讀取方法內部的區域性變數:通過閉包
<script type="text/javascript"> var a=11; //全域性變數 function func(){ var b=22; //區域性變數 c=33;// 全域性變數 //閉包 function func2(){ alter(b); } return
- 閉包的概念
- 閉包就是能夠讀取其他函式內部變數的函式。
- 由於在 Javascript 語言中,只有函式內部的子函式才能讀取區域性變數,因此可以把閉包簡單理解成“定義在一個 函式內部的函式”。
- 在本質上,閉包就是將函式內部和函式外部連線起來的一座橋樑。
- 閉包的用途
- 讀取函式內部的變數,
- 讓這些變數的值始終保持在記憶體中。
- 閉包的使用注意點
- 由於閉包會使得函式中的變數都被儲存在記憶體中,記憶體消耗很大,所以不能濫用閉包,否則會造成網頁的效能問題,在 IE 中可能導致記憶體洩露。解決方法是,在退出函式之前,將不使用的區域性變數全部刪除。
- 閉包會在父函式外部,改變父函式內部變數的值。所以,如果你把父函式當作物件(object)使用,把閉包當作它的公用方法(Public Method),把內部變數當作它的私有屬性(private value),這時一定要小心,不要隨便改變父函式內部變數的值。
3. JavaScript 面向物件實現
- 面向物件三大特徵
- 封裝、繼承、多型
- JS本身沒有,但可以模擬實現
- JavaScript 自定義物件
- 建立物件方式:
- 方式1,物件初始化器方式;鍵值對的形式
var marry={ name:"marry", age:2, shout:function(){ alter(this.name+this.age); }, action:function(){ alter("會吃"); } }
- 方式2,建構函式方式;
function Dog(name,age){ this.name=name; this.age=age; this.shout=function(){ alter(this.name+this.age); }; this.action=function(){ alter("會吃"); }; } var jack=new Dog("jack",1);
- 方式1,物件初始化器方式;鍵值對的形式
- 物件屬性定義:
- 私有屬性;
- 物件屬性;
- 類屬性;
//定義 function C(){ this.objPro="物件屬性1"; C.proyotype.objPro2="物件屬性2" var privatePro="私有屬性"; } C.classPro="類屬性"; //使用
//物件屬性 必須要 new var c=new C(); alter(c.objPro); alter(c.objPro2); //私有屬性,要用閉包取出 //類屬性,直接呼叫 alter(C.classPro);
- 物件方法定義:
- 私有方法;
- 物件方法;
- 類方法;
//定義 function(){ var privateFunc=function(){ alert("私有方法"); }; this.objFunc=function(){ alert("物件方法"); }; C.prototype.objFunc2=function(){ alert("物件方法2"); }; } C.classFunc=function(){ alert("類方法"); }; //呼叫 // 物件方法 必須要 new var c=new C(); c.objFunc(); c.objFunc2(); // 私有方法,內部呼叫 //類方法 C.classFunc();
- 建立物件方式:
- JavaScript 實現封裝特性
- 物件裡面對屬性進行封裝,在之後呼叫
- JavaScript 實現繼承特性
- Apply() 實現屬性和方法的繼承,原型還是不變
function Animal(name,age){ this.name=name; this.age=age; this.shout=function(){ alert(this.name+this.age); }; this.action=function(){ alert("會吃"); }; } function Dog(name,age){ Animal.apply(this, [name,age]); //把Animal的屬性copy給Dog ,原型不變,還是條狗 } var jack=new Dog("jack",1);
alert(jack.name); alert(jack.age); jack.shout(); jack.action(); - Prototype 實現原型的繼承;
function Dog(name,age){ Animal.apply(this, [name,age]); //把Animal的屬性copy給Dog } Dog.prototype=new Animal(); //原型改變,是animal
- Apply() 實現屬性和方法的繼承,原型還是不變
- JavaScript 實現多型特性
function Animal(){ this.say=function(){ alert("我是動物"); }; } function Dog(){ this.say=function(){ alert("我是狗"); }; } Dog.prototype=new Animal(); function Cat(){ this.say=function(){ alert("我是貓"); }; } Cat.prototype=new Animal(); function say(animal){ if(animal instanceof Animal){ animal.say(); } } var dog=new Dog(); var cat=new Cat(); say(dog); //我是狗 say(cat); //我是貓