Javascript对象文字,如何解决上下文
Javascript object literal, how to solve context?
我想开始正确地组织我的代码,所以我想使用对象文字。在下面的例子中,我正在做一个伪类。我希望init()
可以用作构造函数,但不幸的是,我没有看到如何根据对象上下文设置属性。
var car = {
context : this,
wheels : 0,
color : '',
speed : 0,
init : (function(x){
console.log(x);
x.wheels = 4;
x.color = 'red';
x.speed = 120;
})(context)
};
console.log(car.color);
你不能在声明对象文字时立即运行这样的函数。您可以执行的操作:
var car = {
init : function(wheels,color,speed){
this.wheels = wheels || 0;
this.color = color || '';
this.speed = speed || 0;
return this;
}
}.init(4,'red',120);
alert(car.speed); //=>120
这消除了对以下的需求:
context : this,
wheels : 0,
color : '',
speed : 0,
。并提供以下可能性:
var car = {
init : function(wheels,color,speed){
this.wheels = wheels || 0;
this.color = color || '';
this.speed = speed || 0;
return this;
}
},
redAndFast = car.init(4,'red',230),
threeWheeler = car.init(3,'yellowstriped',110);
[编辑]我在想什么?如果你想要更多的 Car 实例,你必须使用一个真正的 constructor
函数而不是一个对象文字:
var Car = function(){
return {
init : function(wheels,color,speed){
this.wheels = wheels || 0;
this.color = color || '';
this.speed = speed || 0;
return this;
}
}
},
redAndFast = new Car().init(4,'red',230),
threeWheeler = new Car().init(3,'yellowstriped',110);
可以简化为:
var Car = function(wheels,color,speed){
this.wheels = wheels || 0;
this.color = color || '';
this.speed = speed || 0;
},
redAndFast = new Car(4,'red',230),
threeWheeler = new Car(3,'yellowstriped',110);
或者,如果您想坚持使用一些类似init
的功能:
var Car = (function(){
function car(wheels,color,speed){
this.wheels = wheels || 0;
this.color = color || '';
this.speed = speed || 0;
}
return {
init: function(w,c,s){
return new car(w,c,s);
}
};
})(),
redAndFast = Car.init(4,'red',230),
threeWheeler = Car.init(3,'yellowstriped',110);
但是,嘿,我的context
怎么了?你可能会问。好吧,事实证明你毕竟不需要它。JavaScript不是一种美丽而灵活的语言吗?
var Car = function() {
this.wheels = 4;
this.color = 'red';
this.speed = 120;
}
var car = new Car();
最好为此类任务使用普通构造函数。
对象文字适用于单例。如果你想要一个可实例化的对象,你需要学习js oop是如何工作的,并且只使用函数对象。
相关文章:
- 将函数的上下文应用于javascript变量
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- 使用JQuery的动态上下文菜单
- 如何解决Yii中的页面刷新问题
- 测试Angular Service解决错误回调中的promise
- 如何访问UIWebView'的子窗口上下文
- 如何解决Access Control Allow Origin错误
- 如何解决这种情况下的非法调用类型错误
- JQuery在单击正文时隐藏上下文菜单
- JQuery上下文菜单显示/隐藏问题
- 简单的ES6承诺问题-交换解决和拒绝参数
- 如何从HTTP上下文对象中获取Post数据
- 可以转换显示属性吗?如果没有,什么'这是最好的解决方案
- iPad虚拟键盘-哪一个-javasctript解决方案
- HTML字符串作为上下文
- 在ES6 Promise中,我应该在解决/拒绝之前使用return吗
- 如何解决“;错误所请求的URL返回500-内部服务器错误”;
- 处理多个画布上下文的解决方案
- Javascript对象文字,如何解决上下文
- 除了绑定之外,任何其他上下文解析的解决方案都在承诺中