如何在Javascript中构造对象时调用函数?

时间:2022-11-07 16:56:46

I want to create an object and run two of its methods on object creation. So if my object is

我想创建一个对象并在对象创建时运行它的两个方法。所以,如果我的对象是

function newObj(){
this.v1 = 10;
this.v2 = 20;
this.func1 = function(){ ....};
this.func2 = function(){...};
}

and the call to the object is

并且对该对象的调用是

var temp = new newObj();

I want to run func1() and func2() without calling them explicity on temp variable, like temp.func1(). I want them to be called when I create the new Object variable. I tried putting this.func1() inside the newObj declaration but it doesn't seem to work.

我想运行func1()和func2(),而不是在临时变量上调用它们,比如temp.func1()。我希望在创建新的Object变量时调用它们。我尝试将this.func1()放在newObj声明中,但它似乎不起作用。

6 个解决方案

#1


10  

Add method invocation statements in constructor:

在构造函数中添加方法调用语句:

function newObj(){
this.v1 = 10;
this.v2 = 20;
this.func1 = function(){ ....};
this.func2 = function(){...};
this.func1();
this.func2();
}

I think it is solution of your needs.

我认为这是您需求的解决方案。

#2


6  

Just call it from within the constructor itself it works just fine: http://jsfiddle.net/yahavbr/tTf9d/

只需从构造函数本身调用它就可以正常工作:http://jsfiddle.net/yahavbr/tTf9d/

The code is:

代码是:

function newObj(){
    this.v1 = 10;
    this.v2 = 20;
    this.func1 = function() { alert("func1"); };
    this.func2 = function() { alert("func2"); };

    this.func1();
    this.func2();
}

#3


4  

This works for me in Chrome:

这适用于Chrome:

function newObj(){
  this.v1 = 10;
  this.v2 = 20;
  this.func1 = function(){ this.v1 += 1; };
  this.func2 = function(){ alert(this.v1); };
  this.func1();
  this.func2();
}
var obj = new newObj();

#4


1  

Try wrapping it in an self invoking function if you never plan on reusing it, like this:

如果你从未计划重复使用它,请尝试将其包装在自调用函数中,如下所示:

function newObj(){
    this.v1 = 10;
    this.v2 = 20;
    this.func1val = (function(){ alert('called from c\'tor'); })();
    this.func2val = (function(){ return 2 + 1; })();
}

var temp = new newObj();
alert('temp.func2val = ' + temp.func2val);

DEMO

DEMO

#5


0  

Using Self invoking function we can call and we can also share parent parameter by doing some work around public variable var that = this;

使用自我调用函数我们可以调用,我们也可以通过对公共变量var = this进行一些工作来共享父参数;

function newObj(){

this.v1 = 10; // public variable
this.v2 = 20; // public variable
var that = this;  // Allow access to parent function variable to inner function
   (function(){
     // access parent function variable
     // using 'that' ex: 
       that.v1 = 50;
     //fun1code stuff 
   })();

   (function(){
     // access parent function variable
     // using 'that' ex: 
     that.v2 = 60;
     //fun2code stuff 
   })();
}

var temp = new newObj();
console.log(temp.v1);  // output 50
console.log(temp.v2);  // output 60

#6


0  

I think perhaps it needs to be stresed that in JavaScript you need to define the object's functions (or methods, if you prefer that term) before you call them.

我想也许需要强调,在JavaScript中你需要在调用之前定义对象的函数(或方法,如果你更喜欢那个术语)。

For example, if you want to call this.func1() upon instantiation:

例如,如果要在实例化时调用this.func1():

var new_object = new newObj();  // create/instantiate an object

function newObj(){
  this.v1 = 10;
  this.v2 = 20;

  this.func1();  //  <-- calling it here causes an error

  this.func1 = function(){ ....};
  this.func2 = function(){ ....};
  this.func3 = function(){ ....};
}

TypeError: this.func1 is not a function

TypeError:this.func1不是函数

This is a problem I came across years ago when trying to understand how to do OOP in JS. Because in other languages like Java or PHP, you have a constructor function/method usually at the top of your class, and beneath you write in your other functions/methods.

这是我多年前在尝试理解如何在JS中进行OOP时遇到的问题。因为在其他语言(如Java或PHP)中,您通常在类的顶部有一个构造函数/方法,并在您的其他函数/方法中编写。

So it would seem logical to write your class thus: 1) define your object's properties, and then 2) list the things you want to do when the object is instantiated, and then 3) list the other class functions/methods.

因此,编写类是合乎逻辑的:1)定义对象的属性,然后2)列出实例化对象时要执行的操作,然后3)列出其他类函数/方法。

BUT NO!!

但不是!!

With JavaScript, you must define the object's functions before you call them.

使用JavaScript,您必须在调用它们之前定义对象的函数。

So if you want to call two methods on object creation/instantiation, lets say this.func1() and this.func2(), first define everything in your class and at the end place your method calls:

因此,如果你想在对象创建/实例化上调用两个方法,让我们说this.func1()和this.func2(),首先定义类中的所有内容以及方法调用的最后位置:

var new_object = new newObj();  // create/instantiate an object

function newObj(){
  this.v1 = 10;
  this.v2 = 20;

  this.func1 = function(){ ....};
  this.func2 = function(){ ....};
  this.func3 = function(){ ....};

  this.func1();  //  <-- it works here!
  this.func2();  //  <-- it works here!
}

If you wanted to have your code organised with a constructor method placed at the top of other class methods (like previously mentioned, how PHP and Java do it) then you could make a little this._constructor() method and place things there, and call it at the end of your class:

如果你想让你的代码组织一个构造函数方法放在其他类方法的顶部(如前面提到的,PHP和Java如何做),那么你可以做一点this._constructor()方法并把东西放在那里,在课程结束时调用它:

function newObj(){
  this.v1 = 10;
  this.v2 = 20;

  this._constructor = function(){  // do constructor things here
    this.func1();
    this.func2();
  }
  this.func1 = function(){ ....};
  this.func2 = function(){ ....};
  this.func3 = function(){ ....};

  this._constructor();  // call just one method here, nice and tidy
}

Some may say it's kinda redundant, but whatever helps to make your workflow faster... :)

有些人可能会说它有点多余,但无论如何有助于使您的工作流程更快...... :)

Just for the record, if you want to pass some argument when creating/instantiating an object, say you wanted to have the option to set this.v1 then you could do it like this:

只是为了记录,如果你想在创建/实例化一个对象时传递一些参数,假设你想要设置this.v1那么你就可以这样做:

function newObj(set_v1){
  this.v1 = 10;
  this.v2 = 20;

  this._constructor = function(set_v1){  // do constructor things here
    if ( set_v1 != undefined ){  // you can come up with a better condition here
      this.v1 = set_v1;
    }
    this.func1();
    this.func2();
  }
  this.func1 = function(){ ....};
  this.func2 = function(){ ....};
  this.func3 = function(){ ....};

  this._constructor(set_v1);  // call the constructor here and pass the argument
}

#1


10  

Add method invocation statements in constructor:

在构造函数中添加方法调用语句:

function newObj(){
this.v1 = 10;
this.v2 = 20;
this.func1 = function(){ ....};
this.func2 = function(){...};
this.func1();
this.func2();
}

I think it is solution of your needs.

我认为这是您需求的解决方案。

#2


6  

Just call it from within the constructor itself it works just fine: http://jsfiddle.net/yahavbr/tTf9d/

只需从构造函数本身调用它就可以正常工作:http://jsfiddle.net/yahavbr/tTf9d/

The code is:

代码是:

function newObj(){
    this.v1 = 10;
    this.v2 = 20;
    this.func1 = function() { alert("func1"); };
    this.func2 = function() { alert("func2"); };

    this.func1();
    this.func2();
}

#3


4  

This works for me in Chrome:

这适用于Chrome:

function newObj(){
  this.v1 = 10;
  this.v2 = 20;
  this.func1 = function(){ this.v1 += 1; };
  this.func2 = function(){ alert(this.v1); };
  this.func1();
  this.func2();
}
var obj = new newObj();

#4


1  

Try wrapping it in an self invoking function if you never plan on reusing it, like this:

如果你从未计划重复使用它,请尝试将其包装在自调用函数中,如下所示:

function newObj(){
    this.v1 = 10;
    this.v2 = 20;
    this.func1val = (function(){ alert('called from c\'tor'); })();
    this.func2val = (function(){ return 2 + 1; })();
}

var temp = new newObj();
alert('temp.func2val = ' + temp.func2val);

DEMO

DEMO

#5


0  

Using Self invoking function we can call and we can also share parent parameter by doing some work around public variable var that = this;

使用自我调用函数我们可以调用,我们也可以通过对公共变量var = this进行一些工作来共享父参数;

function newObj(){

this.v1 = 10; // public variable
this.v2 = 20; // public variable
var that = this;  // Allow access to parent function variable to inner function
   (function(){
     // access parent function variable
     // using 'that' ex: 
       that.v1 = 50;
     //fun1code stuff 
   })();

   (function(){
     // access parent function variable
     // using 'that' ex: 
     that.v2 = 60;
     //fun2code stuff 
   })();
}

var temp = new newObj();
console.log(temp.v1);  // output 50
console.log(temp.v2);  // output 60

#6


0  

I think perhaps it needs to be stresed that in JavaScript you need to define the object's functions (or methods, if you prefer that term) before you call them.

我想也许需要强调,在JavaScript中你需要在调用之前定义对象的函数(或方法,如果你更喜欢那个术语)。

For example, if you want to call this.func1() upon instantiation:

例如,如果要在实例化时调用this.func1():

var new_object = new newObj();  // create/instantiate an object

function newObj(){
  this.v1 = 10;
  this.v2 = 20;

  this.func1();  //  <-- calling it here causes an error

  this.func1 = function(){ ....};
  this.func2 = function(){ ....};
  this.func3 = function(){ ....};
}

TypeError: this.func1 is not a function

TypeError:this.func1不是函数

This is a problem I came across years ago when trying to understand how to do OOP in JS. Because in other languages like Java or PHP, you have a constructor function/method usually at the top of your class, and beneath you write in your other functions/methods.

这是我多年前在尝试理解如何在JS中进行OOP时遇到的问题。因为在其他语言(如Java或PHP)中,您通常在类的顶部有一个构造函数/方法,并在您的其他函数/方法中编写。

So it would seem logical to write your class thus: 1) define your object's properties, and then 2) list the things you want to do when the object is instantiated, and then 3) list the other class functions/methods.

因此,编写类是合乎逻辑的:1)定义对象的属性,然后2)列出实例化对象时要执行的操作,然后3)列出其他类函数/方法。

BUT NO!!

但不是!!

With JavaScript, you must define the object's functions before you call them.

使用JavaScript,您必须在调用它们之前定义对象的函数。

So if you want to call two methods on object creation/instantiation, lets say this.func1() and this.func2(), first define everything in your class and at the end place your method calls:

因此,如果你想在对象创建/实例化上调用两个方法,让我们说this.func1()和this.func2(),首先定义类中的所有内容以及方法调用的最后位置:

var new_object = new newObj();  // create/instantiate an object

function newObj(){
  this.v1 = 10;
  this.v2 = 20;

  this.func1 = function(){ ....};
  this.func2 = function(){ ....};
  this.func3 = function(){ ....};

  this.func1();  //  <-- it works here!
  this.func2();  //  <-- it works here!
}

If you wanted to have your code organised with a constructor method placed at the top of other class methods (like previously mentioned, how PHP and Java do it) then you could make a little this._constructor() method and place things there, and call it at the end of your class:

如果你想让你的代码组织一个构造函数方法放在其他类方法的顶部(如前面提到的,PHP和Java如何做),那么你可以做一点this._constructor()方法并把东西放在那里,在课程结束时调用它:

function newObj(){
  this.v1 = 10;
  this.v2 = 20;

  this._constructor = function(){  // do constructor things here
    this.func1();
    this.func2();
  }
  this.func1 = function(){ ....};
  this.func2 = function(){ ....};
  this.func3 = function(){ ....};

  this._constructor();  // call just one method here, nice and tidy
}

Some may say it's kinda redundant, but whatever helps to make your workflow faster... :)

有些人可能会说它有点多余,但无论如何有助于使您的工作流程更快...... :)

Just for the record, if you want to pass some argument when creating/instantiating an object, say you wanted to have the option to set this.v1 then you could do it like this:

只是为了记录,如果你想在创建/实例化一个对象时传递一些参数,假设你想要设置this.v1那么你就可以这样做:

function newObj(set_v1){
  this.v1 = 10;
  this.v2 = 20;

  this._constructor = function(set_v1){  // do constructor things here
    if ( set_v1 != undefined ){  // you can come up with a better condition here
      this.v1 = set_v1;
    }
    this.func1();
    this.func2();
  }
  this.func1 = function(){ ....};
  this.func2 = function(){ ....};
  this.func3 = function(){ ....};

  this._constructor(set_v1);  // call the constructor here and pass the argument
}