更新 - JavaScript的「這個」沒有指向正確的對象

Question

我有一個Person構造函數將獲取或設置一個人的首，末和全名。

var Person = function(firstAndLast) { 
    var self = this; 
    this.getFirstName = function(){ 
     var first = self.firstName || (function(){ 
     return firstAndLast.split(' ')[0]; 

     })(); 
     return first; 
    }; 
    this.getLastName = function(){ 
     var last = self.lastName || (function(){ 
     return firstAndLast.split(' ')[1]; 

     })(); 
     return last; 
    }; 
    this.getFullName = function(){ 
     var full = self.fullName || (function(){ 
     var first = firstAndLast.split(' ')[0]; 
     var last = firstAndLast.split(' ')[1]; 
     return first + " " + last; 
     })(); 
     return full; 
    }; 
    this.setFirstName = function(first){ 
     self.firstName = first; 
     console.log('first name is now: ' + self.firstName); 
    }; 
    this.setLastName = function(last){ 
     self.lastName = last; 
     console.log('last name is now: ' + self.lastName); 
    }; 
    this.setFullName = function(firstAndLast){ 
     self.fullName = firstAndLast; 
     console.log('full name is now: ' + self.fullName); 
    }; 
}; 

獲取預期方式工作...

var claude = new Person('Claude Shannon'); 
claude.getFullName(); 

但是，爲什麼沒有了以下工作？

claude.setFirstName('james'); 
claude.getFullName(); // "Claude Shannon" 

（很顯然，我期待「詹姆斯·香農

Answer 1

簡單，你從來​​沒有真正回報新全名（由通過setFirstName和setLastName設置兩個屬性）。你從構造函數中返回一個。

this.getFullName = function(){ 
    var full = this.fullName || (function(){ 
    var first = firstAndLast.split(' ')[0]; 
    var last = firstAndLast.split(' ')[1]; 
    return first + " " + last; 
    })(); 
    return full; 
}; 

與

this.getFullName = function(){ 
    return this.getFirstName() + " " + this.getLastName() 
}; 

var Person = function(firstAndLast) { 
 
    var self = this; 
 
    this.getFirstName = function(){ 
 
     var first = this.firstName || (function(){ 
 
     return firstAndLast.split(' ')[0]; 
 

 
     })(); 
 
     return first; 
 
    }; 
 
    this.getLastName = function(){ 
 
     var last = this.lastName || (function(){ 
 
     return firstAndLast.split(' ')[1]; 
 

 
     })(); 
 
     return last; 
 
    }; 
 
    this.getFullName = function(){ 
 
     return this.getFirstName() + " " + this.getLastName() 
 
    }; 
 
    this.setFirstName = function(first){ 
 
     self.firstName = first; 
 
     console.log('first name is now: ' + self.firstName); 
 
    }; 
 
    this.setLastName = function(last){ 
 
     self.lastName = last; 
 
     console.log('last name is now: ' + self.lastName); 
 
    }; 
 
    this.setFullName = function(firstAndLast){ 
 
     self.fullName = firstAndLast; 
 
     console.log('full name is now: ' + self.fullName); 
 
    }; 
 
}; 
 

 
var claude = new Person('Claude Shannon'); 
 
console.log(claude.getFullName()); 
 

 
claude.setFirstName('James'); 
 
console.log(claude.getFullName()); // "Claude Shannon"

Answer 2

我的意見，把所有的方法爲原型，只是使用這個無處不在。

但問題是，getFullName（）的外觀在 的this.fullName屬性。既然你用setFirstName（），其中只規定this.firstName到詹姆斯getFullName不斷回頭看在構造函數中，即「香農」所使用的參數，因爲this.fullName是不確定的。

Answer 3

您正在讀取傳遞給構造函數的初始參數的完整名稱 - 它永遠不會更新。你需要閱讀屬性。當獲取名字或姓氏時，您確實從動態屬性讀取，但對於全名，您總是從最初的構造函數arg讀取數據。

此外，沒有任何理由寫self - this是好的。

我做了一些其他的變化。 Fiddle。

var Person = function(first, last) { 
    //var self = this; <-- unnecessary 
    this.getFirstName = function(){ 
     var first = this.firstName || (function(){ 
     return firstAndLast.split(' ')[0]; 

     })(); 
     return first; 
    }; 
    this.getLastName = function(){ 
     var last = this.lastName || (function(){ 
     return firstAndLast.split(' ')[1]; 

     })(); 
     return last; 
    }; 
    this.getFullName = function(){ 
     //much simpler than before - just concatenate properties 
     return this.firstName+' '+this.lastName; 
    }; 
    this.setFirstName = function(first){ 
     this.firstName = first; 
     alert('first name is now: ' + this.firstName); 
    }; 
    this.setLastName = function(last){ 
     this.lastName = last; 
     console.log('last name is now: ' + this.lastName); 
    }; 
    this.setFullName = function(firstAndLast){ 
     this.fullName = firstAndLast; 
     console.log('full name is now: ' + this.fullName); 
    }; 
    this.setFirstName(first); //set initial first name passed to construc 
    this.setLastName(last); //" " last " " " " 
}; 

var claude = new Person（'Claude'，'Shannon'）; //注意，兩個獨立的ARGS claude.setFirstName（ '詹姆斯'）; alert（claude.getFullName（））; //「詹姆斯香」

Answer 4

在你getFullName功能，你不檢查名字。你只是檢查全名是否存在。即使您在代碼中更正了您的上下文，您仍然會因爲邏輯而面臨問題。

this.getFullName = function(){ 
    var full = this.fullName || (function(){ 
    var first = firstAndLast.split(' ')[0]; 
    var last = firstAndLast.split(' ')[1]; 
    return first + " " + last; 
    })(); 
    return full; 
};