构造函数中的方法和创建构造函数后函数上的方法有什么区别

What is difference between method in constructor and method on function after constructor created

本文关键字:构造函数 方法 区别 什么 创建 函数      更新时间:2023-09-26

第一代码和第二代码有什么区别?有什么逻辑上的区别吗?

第一:

function test(val) {
    this.val = val;
    this.get = function () {
        return "Hello world";
    };
}

第二:

function test(val) {
    this.val = val;
}
test.get = function () {
    return "Hello world";
}; 
何时

将方法添加到构造函数,何时设置方法,以及为什么?

第二个向函数本身添加一个方法。 这与第一个实例方法不同。

这两者在功能上相似:

function test(val) {
    this.get = function () {};
}

function test(val) {
}
test.prototype.get = function() {};

两者都创建如下所示的实例方法:

var x = new test("hello");
x.get();

但是,您的第二个选项只是在构造函数上创建一个属性,该属性不是测试创建对象的方法。 它是一种静态方法。 执行此操作时:

function test(val) {
    this.val = val;
}
test.get = function () {
    return "Hello world";
}; 

然后,执行以下命令:

var x = new test("hello");
x.get();

您会发现x对象没有.get()方法。 该方法仅在构造函数本身上test.get()。 要使方法存在于对象的新实例上,必须将其分配给原型对象或在创建对象后分配给对象(例如,在构造函数或其他方法中)。 直接附加到构造函数本身的方法(如test.get = function () {}中)只是构造函数的属性,不由构造函数创建的对象继承。 它们有点类似于其他语言中的类静态方法。 它们不是实例方法。

在第一个示例中,get 方法仅在创建新对象后可用。

test.get(); // This will throw an error
var a = new test();
a.get(); // This will work.

在第二个示例中,可以直接在测试函数上调用 get 方法

test.get(); // This will work.

如果你把代码翻译成英文,它看起来像这样

第一:

  • 让我们定义一个名为 test 的函数。
  • 在此函数中,让我们在返回对象上创建一个get函数。

第二

  • 让我们定义一个名为 test 的函数。
  • 让我们将一个名为 get 的函数定义为 test 函数的属性。

在您的第一个示例中,后台的 JavaScript 正在为您创建一个对象,该对象将在查找失败时委托给构造函数原型,并且它还为您返回该对象。例如

function test(val) {
    //var this = Object.create(test.prototype);
    this.val = val;
    this.get = function () {
        return "Hello world";
    };
    //return this;
}

因此,您实际上是在每次调用测试函数时将方法添加到为您创建的每个实例对象上。

在第二个示例中,您利用了函数只是 JavaScript 中的对象这一事实,并向函数添加属性,这是相当罕见的。