在JavaScript中使用“prototype”与“this”？

两者之间有什么区别

var A = function () {
    this.x = function () {
        //do something
    };
};

and

var A = function () { };
A.prototype.x = function () {
    //do something
};

当前回答

想想静态类型的语言，原型上的东西是静态的，而这上面的东西是与实例相关的。

2017-12-19 01:13:04

其他回答

有什么区别？=>很多。

我认为，这个版本用于实现封装，即数据隐藏。它有助于处理私有变量。

让我们看一下以下示例：

var AdultPerson = function() {

  var age;

  this.setAge = function(val) {
    // some housekeeping
    age = val >= 18 && val;
  };

  this.getAge = function() {
    return age;
  };

  this.isValid = function() {
    return !!age;
  };
};

现在，原型结构可以应用如下：

不同的成年人有不同的年龄，但所有成年人都享有相同的权利。所以，我们使用原型而不是这个添加它。

AdultPerson.prototype.getRights = function() {
  // Should be valid
  return this.isValid() && ['Booze', 'Drive'];
};

现在让我们看看实现。

var p1 = new AdultPerson;
p1.setAge(12); // ( age = false )
console.log(p1.getRights()); // false ( Kid alert! )
p1.setAge(19); // ( age = 19 )
console.log(p1.getRights()); // ['Booze', 'Drive'] ( Welcome AdultPerson )

var p2 = new AdultPerson;
p2.setAge(45);    
console.log(p2.getRights()); // The same getRights() method, *** not a new copy of it ***

希望这有帮助。

2014-01-06 06:13:34

第一个示例仅更改该对象的接口。第二个示例更改该类的所有对象的接口。

2008-11-22 04:43:28

这些例子有非常不同的结果。

在研究差异之前，应注意以下几点：

构造函数的原型提供了一种通过实例的私有[[prototype]]属性在实例之间共享方法和值的方法。函数的this是通过函数的调用方式或使用bind（此处未讨论）来设置的。如果在对象上调用函数（例如myObj.method（）），则方法中的函数将引用该对象。如果这不是通过调用或使用bind设置的，则默认为全局对象（浏览器中的窗口）或严格模式，保持未定义。JavaScript是一种面向对象的语言，即大多数值都是对象，包括函数。（字符串、数字和布尔值不是对象。）

以下是有问题的片段：

var A = function () {
    this.x = function () {
        //do something
    };
};

在这种情况下，变量A被分配了一个引用函数的值。当使用A（）调用该函数时，函数的this不会被调用设置，因此它默认为全局对象，表达式this.x是有效的window.x。结果是，对右侧函数表达式的引用被分配给window.x。

在以下情况下：

var A = function () { };
A.prototype.x = function () {
    //do something
};

发生了非常不同的事情。在第一行中，变量A被分配给一个函数的引用。在JavaScript中，默认情况下，所有函数对象都有一个prototype属性，因此没有单独的代码来创建a.prototype对象。

在第二行中，为A.prototype.x分配了对函数的引用。如果x属性不存在，这将创建一个x属性，如果存在，则分配一个新值。因此，与第一个示例的不同之处在于，表达式中包含了对象的x属性。

另一个例子如下。这与第一个类似（也许你想问的是什么）：

var A = new function () {
    this.x = function () {
        //do something
    };
};

在本例中，在函数表达式之前添加了新运算符，以便将函数作为构造函数调用。当使用new调用时，函数的this被设置为引用一个新Object，该Object的私有[[Prototype]]属性被设置为参考构造函数的公共原型。因此，在赋值语句中，将在这个新对象上创建x属性。当作为构造函数调用时，函数默认返回其this对象，因此不需要单独返回this；陈述

要检查A是否具有x属性：

console.log(A.x) // function () {
                 //   //do something
                 // };

这是一种不常见的new用法，因为引用构造函数的唯一方法是通过A.constructor

var A = function () {
    this.x = function () {
        //do something
    };
};
var a = new A();

实现类似结果的另一种方法是使用立即调用的函数表达式：

var A = (function () {
    this.x = function () {
        //do something
    };
}());

在本例中，A指定了调用右侧函数的返回值。在这里，由于在调用中未设置此项，因此它将引用全局对象，而此.x是有效的window.x。由于函数不返回任何内容，因此A的值将为undefined。

如果要将Javascript对象序列化为JSON或从JSON反序列化，这两种方法之间的差异也会很明显。序列化对象时，对象原型上定义的方法不会被序列化，例如，如果您只想序列化对象的数据部分，而不想序列化其方法，这会很方便：

var A = function () { 
    this.objectsOwnProperties = "are serialized";
};
A.prototype.prototypeProperties = "are NOT serialized";
var instance = new A();
console.log(instance.prototypeProperties); // "are NOT serialized"
console.log(JSON.stringify(instance)); 
// {"objectsOwnProperties":"are serialized"}

在JavaScript中使用“prototype”与“this”？

推荐文章

最新文章

标签