標籤:prototype stat new 前端 child view eth copy 3.3
最近段時間主要學習前端去了,然而所遇到的一些問題我覺得有必要去深究一下
prototype:
1 js中有三種表達方法
類方法,屬性方法,原型方法
function People(name) { this.name=name; //對象方法 this.Introduce=function(){ console.log("My name is "+this.name); }}//類方法People.Run=function(){ console.log("I can run");}//原型方法People.prototype.IntroduceChinese=function(){ console.log("我的名字是"+this.name);}//測試var p1=new People("xx");p1.Introduce(); // My name is xxPeople.Run(); //I can runp1.IntroduceChinese(); 我的名字是xx
其實從上面可以看出prototype,實際上向people中添加了一個方法,而這也應官方的解釋“prototype 屬性使您有能力向對象添加屬性和方法"
2 實現繼承
function baseClass(){ this.showMessage = function () { console.log(‘baseClass:‘,‘woc this is bad boy‘) }}// function extendClass(){}function extendClass(){ this.showMessage = function () { console.log(‘extendClass:‘, ‘woc this is good body‘) }}function extendClass1(){} extendClass.prototype = new baseClass()extendClass1.prototype = new baseClass()var eC = new extendClass() //extendClass: woc this is good body
var eC1 = new extendClass1() //baseClass: woc this is bad boy
eC.showMessage()eC1.showMessage()
從上面的案例可以看出如果extendClass()的showMessage存在的情況就會指向自己,如果不存在就會指向其”父類“
call() 和 appyl()
1 每個function中有一個prototype, call(), apply()
call() apply() 我簡單的理解為改變你當前對象的指向,這可能有點抽象,看下代碼
function method1(arg1, arg2) { return arg1+arg2}function method2(arg1, arg2) { return arg1-arg2}var result1 = method2.apply(method1,[3,2]);var result2 = method1.call(method2,3,3)console.log(result1); //1console.log(result2); //6
從上面的執行個體可以看出兩個function的指向發上了改變
call() apply(): 這個是當前的this指標指向調用你的那個function(有點類似copy的意思)
而兩者的區別在於apply() 在參數上只有兩個參數(當前方法,數組),
而call()的參數則是單個單個的形式
2 實現繼承
function father(word) { this.word = word this.showName1 = function(){ console.log(‘Father say:‘, this.word) }}function mother(word) { this.word = word this.showName2 = function () { console.log(‘Mother say:‘, this.word) }}function child(word) { // father.apply(this,[word]) father.call(this, word) mother.call(this, word)}var c = new child(‘boys‘);c.showName1(); // Father say: boysc.showName2(); // Mother say: boys
3 好的案例
(1)活用
var result = Math.max(7.25,7.30)var array = [1,3,4,5,6,0,32.3,3.3]var result1 = Math.max.apply(null,array);var result2 = Math.min.apply(null,array);console.log(result) // 7.3console.log(result1) // 32.3console.log(result2) // 0
在js Math.max()中的參數是沒有傳數組的形式的,而這裡通過apply()巧妙地實現了這種轉變,首先我們並不需要那個對象去指向Math,所以放了一個null做為參數,然後將arary數組傳入其中
(2) 理解
function baseClass() { this.showMsg = function() { console.log("baseClass::showMsg"); } this.baseShowMsg = function() { console.log("baseClass::baseShowMsg"); }}baseClass.showMsg = function(){ console.log("baseClass::showMsg static");}function extendClass(){ this.showMsg =function () { console.log("extendClass::showMsg"); }}extendClass.showMsg = function(){ console.log("extendClass::showMsg static")}extendClass.prototype = new baseClass();var instance = new extendClass();instance.showMsg(); //顯示extendClass::showMsginstance.baseShowMsg(); //顯示baseClass::baseShowMsginstance.showMsg(); //顯示extendClass::showMsgbaseClass.showMsg.call(instance);//顯示baseClass::showMsg staticvar baseinstance = new baseClass();baseinstance.showMsg.call(instance);//顯示baseClass::showMsg
View Code
js中call(),apply(),以及prototype的含義