Javascript OOP - 声明对象的方法

Javascript OOP - declaring methods of an object

本文关键字：方法 对象 声明 OOP Javascript      更新时间：2023-09-26

这是我能想到的最基本的JS对象示例，它说明了我的问题。

问题1.

如何在类中引用函数，以便在其他代码中调用方法？这给了我一个错误。

  var name1 = new Name();
  name1.render();

问题2.

像这样内联声明函数与使用 var getByID = function() ... 有什么区别？

示例对象：

function Name(user_id, container_id) {
  this.userID = user_id;
  this.containerID = container_id;
  this.firstName = null;
  this.lastName = null;
  function getByID(userID) {
    // An ajax call that takes a userID to get a name.
  }
  function setName() {
    // An ajax call to get the name from db.
    name_record = this.getByID(this.userID); ????? this returns an error that getByID is undefined.
    this.firstName = name_record.firstName;
    this.lastName = name_record.lastName;
  }
  function render() {
    $(this.containerID).val(this.firstName + ' ' + this.lastName);
  }
}

你可以像在第二个问题中所做的那样声明一个对象，它是有效的，因为函数也是一个对象。或其他方式，例如：

var Name = {
    render: function() {
    }
}
Name.render();

或带原型：

function Name() {
}
Name.prototype.render = function() {
}
// or
Name.prototype = {
    getByID: function() {
    },
    setName: function() {
    }
}
var n = new Name();

所有这些狙击手都是有效的对象声明。

你的第二个问题可能会回答第一个问题。当你声明一个这样的函数时：

function Name() {
    function render() {
    }
}
var n = new Name();

这就像render()是一个私有方法。 如果在函数名称 n.render() 之外调用，您将看到抛出的错误，因为无法识别render。但是如果你改成这个...

function Name() {
    this.render = function() {
    }
}

。然后n.render()将像render()成为公共方法一样工作。有关public和private方法的更多信息，请参阅此处和此处。

现在，将函数声明为"内联"或将其设置为变量之间的区别在于：

function Name() {
}

你可以做：

var n1 = Name();
var n2 = Name();
var nn = Name(); // and so on...

但有：

var n = function Name() {
}

是n()会起作用，Name()不会。即使var a = Name()也会抛出异常。

这是一篇关于这个主题的好文章，值得一读。我希望它能有所帮助。

问题 1：Javascript中的"类"只不过是一个对象。 对象具有可以访问的属性。 这些属性是变量、函数或其他对象。 通过声明您的函数，例如：

  function render() {
    $(this.containerID).val(this.firstName + ' ' + this.lastName);
  }

您正在函数 Name（） 的范围内声明一个函数，但该函数不是 Name 的属性。 这只是一种私人方法。 有多种方法可以使其成为 Name（） 的一部分，例如：

function Name(user_id, container_id) {
  this.userID = user_id;
  this.containerID = container_id;
  this.firstName = null;
  this.lastName = null;
  this.render = function() {
    console.log('hello world');
  }
}
var name1 = new Name();
name1.render();

问题2：没有区别。 它们只是实现相同结果的两种不同语法。 第二种方法（声明 var 并定义函数）会立即为您提供对函数的引用，但这也可以通过第一种方法实现。

回答您的第一个问题：

函数 getByID，setName 和 render 是构造函数的本地函数，不能由类对象调用。您必须使用原型继承。

例如。

function Name(user_id, container_id) {
this.userID = user_id;
this.containerID = container_id;
this.firstName = null;
this.lastName = null;
}
Name.prototype = {
getByID :function(userID) {
  // An ajax call that takes a userID to get a name.
}
setName:function() {
  // An ajax call to get the name from db.
  name_record = this.getByID(this.userID); 
  this.firstName = name_record.firstName;
  this.lastName = name_record.lastName;
}
render:function() {
  $(this.containerID).val(this.firstName + ' ' + this.lastName);
}
};

回答你的第二个问题：

在以下情况下 abc（）;//error 函数 abc（）{ }

这个函数是在运行时创建的，所以只能在声明后调用它

然而，这

abc();
var abc = function(){
};

在解析时创建，以便您可以在声明之前调用它。

相关文章：