JavaScript 原型继承:语法简洁?

发布于 2024-12-22 12:30:46 字数 800 浏览 1 评论 0原文

有没有比三个不同的程序操作更简洁的方式来表达这一点?更像对象表示法的东西,或者至少都在 Name 函数体内?

问题:

function Name(first, last) {
    this.first = first;
    this.last = last;
}

Name.prototype = new String;

Name.prototype.toString = function() {
   return this.last + ', ' + this.first;
};

测试:

console.log(new Name("jimmy", "dean").toString())
console.log(new Name() instanceof Name);
console.log(new Name() instanceof String);
console.log(new Name() instanceof Object);
console.log(Name.prototype.toString.call(new Name('jimmy', 'dean')));
console.log(Name.prototype.toString.call({
    first: 'jimmy',
    last: 'dean'
}));

预期输出:

< "dean, jimmy"
< true
< true
< true
< "dean, jimmy"
< "dean, jimmy"

Is there a more succinct way to express this than three distinct, procedural operations? Something more object notation-like, or at least all within the body of the Name function?

Problem:

function Name(first, last) {
    this.first = first;
    this.last = last;
}

Name.prototype = new String;

Name.prototype.toString = function() {
   return this.last + ', ' + this.first;
};

Test:

console.log(new Name("jimmy", "dean").toString())
console.log(new Name() instanceof Name);
console.log(new Name() instanceof String);
console.log(new Name() instanceof Object);
console.log(Name.prototype.toString.call(new Name('jimmy', 'dean')));
console.log(Name.prototype.toString.call({
    first: 'jimmy',
    last: 'dean'
}));

Expected output:

< "dean, jimmy"
< true
< true
< true
< "dean, jimmy"
< "dean, jimmy"

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

来世叙缘 2024-12-29 12:30:46

示例

function Name(first, last) {
    this.partFirst = first;
    this.partLast = last;
    this.valueOf = this.toString = function() {
        return this.partLast + ', ' + this.partFirst;
    }
}
Name.prototype = new String();

Example

function Name(first, last) {
    this.partFirst = first;
    this.partLast = last;
    this.valueOf = this.toString = function() {
        return this.partLast + ', ' + this.partFirst;
    }
}
Name.prototype = new String();
情绪少女 2024-12-29 12:30:46

我是这样做的:

function subclass(constructor, superConstructor) {
    function surrogateConstructor() { }

    surrogateConstructor.prototype = superConstructor.prototype;

    var prototypeObject = new surrogateConstructor();
    prototypeObject.constructor = constructor;

    constructor.prototype = prototypeObject;
}



/* Base object */
function BaseItem() {
    this.type = 'baseitem';
    this.obj = null;
}
BaseItem.prototype.render = function() {
    return "foo";
}



/* Sub class */
function InteractionArea() {
    BaseItem.call(this);
    this.type = 'interactionarea'
    this.obj = document.createElement('div')
}
subclass(InteractionArea, BaseItem);

//here come the overrides
InteractionArea.prototype.render = function() {
    return "foobar";
}
InteractionArea.prototype.render2 = function() {
    return "foobar";
}



/* Sub-sub class */
function InteractionArea2() {
    InteractionArea.call(this);
    this.type = 'interactionarea2';
    this.obj = false;
}
subclass(InteractionArea2, InteractionArea);

InteractionArea2.prototype.render = function() {
    return "bar";
}

Here's how I do it:

function subclass(constructor, superConstructor) {
    function surrogateConstructor() { }

    surrogateConstructor.prototype = superConstructor.prototype;

    var prototypeObject = new surrogateConstructor();
    prototypeObject.constructor = constructor;

    constructor.prototype = prototypeObject;
}



/* Base object */
function BaseItem() {
    this.type = 'baseitem';
    this.obj = null;
}
BaseItem.prototype.render = function() {
    return "foo";
}



/* Sub class */
function InteractionArea() {
    BaseItem.call(this);
    this.type = 'interactionarea'
    this.obj = document.createElement('div')
}
subclass(InteractionArea, BaseItem);

//here come the overrides
InteractionArea.prototype.render = function() {
    return "foobar";
}
InteractionArea.prototype.render2 = function() {
    return "foobar";
}



/* Sub-sub class */
function InteractionArea2() {
    InteractionArea.call(this);
    this.type = 'interactionarea2';
    this.obj = false;
}
subclass(InteractionArea2, InteractionArea);

InteractionArea2.prototype.render = function() {
    return "bar";
}
棒棒糖 2024-12-29 12:30:46

当然。使用Object.create

var Name = Object.create(String.prototype, {
  toString: { value: function _toString() {
    return this.partLast + ', ' + this.partFirst;
  } },
  constructor: { value: function _constructor(first, last) {
    this.partFirst = first;
    this.partLast = last;
    return this;
  } }
});

var name = Object.create(Name).constructor("foo", "bar");

现在ES5有点难看,所以你可以使用ES5 OO Sugar的一些机制,我们以pd为例:

var Name = pd.make(String.prototype, {
  toString: function _toString() {
    return this.partLast + ', ' + this.partFirst;
  },
  constructor: function (first, last) {
    this.partFirst = first;
    this.partLast = last;
  },
  beget: pd.Base.beget 
});

console.log(Name.beget("jimmy", "dean").toString())
console.log(Name.isPrototypeOf(Name.beget()));
console.log(String.prototype.isPrototypeOf(Name.beget()));
console.log(Object.prototype.isPrototypeOf(Name.beget()));
console.log(Name.toString.call(Name.beget('jimmy', 'dean')));
console.log(Name.toString.call({
    partFirst: 'jimmy',
    partLast: 'dean'
}));

当然输出是符合预期的实例

Sure. Use Object.create.

var Name = Object.create(String.prototype, {
  toString: { value: function _toString() {
    return this.partLast + ', ' + this.partFirst;
  } },
  constructor: { value: function _constructor(first, last) {
    this.partFirst = first;
    this.partLast = last;
    return this;
  } }
});

var name = Object.create(Name).constructor("foo", "bar");

Now ES5 is a bit ugly, so you can use some mechanism for ES5 OO sugar, let's take pd as an example:

var Name = pd.make(String.prototype, {
  toString: function _toString() {
    return this.partLast + ', ' + this.partFirst;
  },
  constructor: function (first, last) {
    this.partFirst = first;
    this.partLast = last;
  },
  beget: pd.Base.beget 
});

console.log(Name.beget("jimmy", "dean").toString())
console.log(Name.isPrototypeOf(Name.beget()));
console.log(String.prototype.isPrototypeOf(Name.beget()));
console.log(Object.prototype.isPrototypeOf(Name.beget()));
console.log(Name.toString.call(Name.beget('jimmy', 'dean')));
console.log(Name.toString.call({
    partFirst: 'jimmy',
    partLast: 'dean'
}));

Of course output is as expected Live Example

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文