Question

所以，我不是JavaScript专家，只是试图理解两段代码之间的区别。我有一个项目要转换为TypeScript，我需要了解生成的两个代码片段之间的区别。

var Pony = (function () {
    function Pony() { }
    Pony.prototype.bite = function () {
        alert("Chomp!");
    };
    return Pony;
})();

var Pony2 = (function () {
    function Pony2() {
        var self = this;
        self.bite = function () {
            alert("Chomp!");
        };
    }
    return Pony2;
})();

Answer 1

两者之间的区别在于你可以通过存储在var Pony中的对象的属性来获得第一个Pony的原型，并且可以在其他地方扩展或使用该原型的相关位，而Pony2只被认为是功能。因此，如果您以后不打算使用任何类型的原型继承，它们就是等价的。

Answer 2

就你如何使用它们而言，没有区别。但是，从性能的角度来看，前一种方法更为可取。让我们稍微扩展你的例子：

var prototypePony1 = new Pony();
var prototypePony2 = new Pony();
var thisPony1 = new Pony2();
var thisPony2 = new Pony2();

prototypePony1.hasOwnProperty('bite'); //returns false
prototypePony2.hasOwnProperty('bite'); //returns false
thisPony1.hasOwnProperty('bite'); //returns true
thisPony2.hasOwnProperty('bite'); //returns true

Pony.prototype.bite = function() { alert('Nomnomnom!'); };
Pony2.prototype.bite = function() { alert('Nomnomnom!'); };

prototypePony1.bite(); //alerts 'Nomnomnom!'   
prototypePony2.bite(); //alerts 'Nomnomnom!'

thisPony1.bite(); //alerts 'Chomp!', instance property is accessed first   
delete thisPony2.bite;
thisPony2.hasOwnProperty('bite'); //returns false
thisPony2.bite(); //alerts 'Nomnomnom!'

在上面的示例中，thisPony1和thisPony2都获得了自己的bite函数副本，因为它是使用this定义的。但prototypePony1和prototypePony2都与bite的构造函数共享Pony的相同副本。

在Pony2上定义bite原型后，仍会首先在thisPony1上访问实例属性。直到我们删除实例属性，我们才会在thisPony2上看到新定义的原型属性。

有关定义对象方法的更多详细信息，请查看here。

Answer 3

上面的答案很好地概述了放置原型和放置实例之间的区别。关于转换为TypeScript的问题，下面是如何编写它们的方法：

class Pony {
    bite(){
        alert('chomp');
    }
}

class Pony2 {
    bite:  () => void;
    constructor(){
        this.bite = () => alert('chomp');
    }
}

JavaScript：在构造函数中定义函数而不是使用原型 - 有什么区别？

3 个答案: