更新 - 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; 
};