替代'self=这个'带有javascript中的对象
Alternative to 'self = this' with object in javascript
我有这个代码:
function Person(name){
var self = this;
this.name = name;
function hello(){
alert("hello " + self.name);
}
return {
hello: hello
};
}
var newPerson = new Person("john");
newPerson.hello();
我希望能够使用"this"关键字访问"hello"函数中的"name"属性;我想要一个替代使用"self"变量的方法。
除了使用jquery的$.proxy函数来控制上下文之外,我如何在没有变量"self"的情况下编写相同的代码?
我想要一个如下所示的代码,但当我调用"newPerson.hello()"时,"name"总是"undefined"。我不知道为什么,因为我一直认为函数的作用域总是调用方圆点左侧的对象,在这种情况下,在创建对象时,"newPerson"被赋予了值"john"。
function Person(name){
this.name = name;
function hello(){
alert("hello " + this.name);
}
return {
hello: hello
};
}
var newPerson = new Person("john");
newPerson.hello();
谢谢。
您可以使用.bind
强制函数的所有者为您传递的任何对象。因此,您可以这样编写Person
对象:
function Person(name){
this.name = name;
var hello = function(){
alert("hello " + this.name);
}.bind(this);
return {
hello: hello
};
}
这将确保.hello
始终在调用它的Person
的上下文中执行
这里有一个演示:
--jsFiddle DEMO-
使用new
关键字时,默认情况下不使用return,函数将返回this
您将需要更改函数的声明方式。
这是一把小提琴
http://jsfiddle.net/SaintGerbil/9SAhD/
function Person(name){
this.name = name;
this.hello = function (){
alert("hello " + this.name);
}
}
var newPerson = new Person("john");
newPerson.hello();
编辑如果您要求名称是私有的,那么这里有一个替代
function Person(name){
var _name = name;
this.hello = function (){
alert("hello " + _name);
}
}
var newPerson = new Person("john");
newPerson.hello();
在回答您的问题时,有4种方法可以调用函数这些影响this
的值,它们是
- 构造函数调用(使用
new
关键字),其中this
是自动返回的新对象 - 方法调用如果一个函数被附加到一个对象并从中调用,那么
this
就是从中调用的对象 - 函数调用对函数的直接调用将导致
this
成为全局对象,(当调用没有new的contstructor时,这是一个常见的错误) - 当使用一个方法来指定应该是什么时,Apply''Call调用(例如,请参阅jackdrowers)
进一步编辑
因此,从一开始就使用您想要的代码,并解释正在发生的事情。
function Person(name){
this.name = name; // 1
function hello(){ // 2
alert("hello " + this.name); // 3
}
return {
hello: hello
}; //4
}
人作为函数可以通过两种方式调用:
var x = Person("ted");
和
var x = new Person("jimmy");
由于您已经用大写字母命名了Person,这意味着您希望人们使用new
因此,坚持这一点,我们输入函数,javascript创建一个新对象并将其分配给this
。
- 在第1行中,我们将一个"name"变量附加到
this
,并使用传递的参数进行初始化 - 在第2行中,我们将一个"hello"函数附加到
this
- 第3行函数希望有一个"name"变量存在于此(目前是这样)
- 第4行我们现在声明一个新对象并将函数附加到它,而不是返回
this
(默认行为)。这个新对象的作用域中没有带的"name"变量
因此,当你创建对象时,你会得到一个附加了函数的对象,但它无法获得正确执行所需的变量。这就是为什么你会得到未定义的。
这有道理吗?我总是担心当我必须扩展文本框时我会胡言乱语?
或者,如果我把你的函数写得尽可能冗长,它会是这样的。
function Person(name){
var this = new Object();
this.name = name;
var hello = function (){
alert("hello " + this.name);
}
this.hello = hello;
var that = new Object();
that.hello = hello;
return that;
}
您似乎混淆了两件事。
a) 常规函数
function CreatePerson(name) {
// create a new object
var person = {};
// or (if you want to provide a prototype)
var person = Object.create(...);
// fill it with some more data
person.name = name;
person.foo = 123;
person.bar = function() { /* ... your method body ... */ };
}
调用类似于:
var person = CreatePerson("Jack");
b) 施工人员
function Person(name) {
// called after a Person is created,
// `this` is bound to the new object
// and its prototype is set to `Person.prototype`
this.name = name;
this.foo = 123;
this.bar = function() { /* ... your method body ... */ };
}
var person = new Person("Jack");
请注意此处的特殊new
语法。
当使用这种风格时,您可能只想创建一次方法,而不是为每个创建的实例创建:
function Person(name) {
// called after a Person is created,
// `this` is bound to the new object
// and its prototype is set to `Person.prototype`
this.name = name;
this.foo = 123;
}
Person.prototype.bar = function() {
/* ... your method body ... */
};
var person = new Person("Jack");
这样做很有效。
如果你只想在函数中访问this,你可以这样做。您使用return{hello:hello}来声明函数,并且您不需要对它做任何操作,除非它是您想要的
示例1
function _persons(array) { this.available = array; this.write = function () { writedata(this.available, '#array2'); }; this.SortAge = function () { array.sort(compare); writedata(this.available, '#array3'); }; array.sort(compareName); } var users = new _persons(myarray);
示例2
function Person(name ){ this.name = name ; this.hello = function(){ alert("hello " + this.name); } } var a = "john"; var newPerson = new Person(a); newPerson.hello(); var otherPerson = new Person("annie"); otherPerson.hello();
- 面向对象JavaScript中的私有函数
- 对象 Javascript 中的标签无效 - 想要添加事件列表器
- 将字符串转换为对象 javascript/jquery
- 正在检查对象javascript中是否存在嵌套属性
- 时间-日期对象JavaScript getUTCMilliseconds
- 仅在对象(javascript)中解析值
- 使用对象(JavaScript或jQuery)填充选择下拉列表
- 引用另一个对象javascript中的对象
- 如何删除列表中的对象?Javascript nodejs和下划线
- 无法从日期对象javascript获取日期和月份
- 如何在if语句中使用对象-Javascript
- 对象javascript错误
- 对象Javascript的少数实例
- 位置对象Javascript
- 将字符串传递到对象javascript中
- 获取对象Javascript或jQuery的最后一个值
- 鼠标接近对象Javascript
- 这个mixins代码是书中的错误吗;面向对象JavaScript的原理”;
- 使用闭包编译器编写更好的面向对象JavaScript完整示例代码
- 访问对象javascript数组中的对象属性值