使用Knockout.js继承 [英] Inheritance with Knockout.js

问题描述

我有一些这样的代码：

var A = function(a,b,c) {
  var self = this;
  self.a = ko.observable(a);
  ... 


  self.function1 = ko.computed(function () {
      dothing(a);
      ...
  } 

  self.function2 = ko.computed(function () {
      dothing(b);
      ...
  }
}

var B = function(a,b,c,d) {
    var self = this;
  self.a = ko.observable(a);
  ... 


  self.function1 = ko.computed(function () {
      dothing(a);
      ...
  } 

  self.function2 = ko.computed(function () {
      dothing(b);
      ...
  }
}

如何将功能1和功能2提取到A和B可以共享的功能？

How can I "extract" function1 and function2 to a function that A and B can share?

推荐答案

这就是原型适用的地方：

That's just where prototypes fit in:

function AB()
{};//empty object
AB.prototype.function1 = function()
{
    var self = this;//doesn't have access to self, but `this` will point to either A or B
    //do stuff
};
var A = function()
{
    var self = this;//constructor
}
var B = function()
{
    var self = this;//constructor
}
A.prototype = new AB;
A.prototype.constructor = A;
B.prototype = new AB;
B.prototype.constructor = B;
//marginally shorter:
A.prototype = B.prototype = new AB;
A.prototype.constructor = A;
B.prototype.constructor = B;
//instances:
var foo = new A();
var bar = new B();
console.log(foo.function1 === bar.function1);//logs true

话虽如此，我个人更喜欢定期定义构造函数 ：

Having said that, personally, I prefer to define my constructors regularly:

function A()
{
    var self = this;
}
foo = new A();
console.log(Object.getPrototypeOf(foo).constructor.name);//logs A

尽管您的代码为变量分配了一个匿名函数，这意味着构造函数没有名称：

Whereas your code assigns an anonymous function to a variable, which means that the constructor doesn't have a name:

foo = new A();
console.log(Object.getPrototypeOf(foo).constructor.name);//logs ''

这不是 大部分交易，但只是让你知道......

It's not that big of a deal, but just so you know...

从全局（或任何其他）范围引用方法：

Reference a method from the global (or any other) scope:

var virtualNewFunction = new A();//create object
virtualNewFunction = virtualNewFunction.function1;//virtualNewFunction now references function1
virtualNewFunction();

闭包将可以访问（暴露），但仍然非常小心这个：

The closure will be accessible (exposed), still, but be very careful with this:

A = function()
{
    var self = this;
    this.function1 = function()
    {
        console.log(this);
        console.log(self);
    };
}
foo = new A();
foo.function1();//logs A twice
foo = foo.function1
foo();//logs this -> window! self => A

另一种可能性是借用一个函数：

An other possibility is "borrowing" a function:

A = function()
{
    var self = this;
    this.function1 = function()
    {
        console.log(this);
        console.log(self);
    };
}
B = function()
{//no method
    var self = this;
}
foo = new A();
bar = new B();
foo.function1.apply(bar,[]);//call as though function1 was method of B

再次注意：在这种情况下此记录 B ，但自我仍引用 A ！您可以构建某些安全网：

Again, be careful: in this case this logs B, but self still references A! You could build in certain "safety nets":

    this.function1 = function()
    {
        self = this !== window && this !== self ? this : self;//redefine self to current caller object, unless it's window 
        console.log(this);
        console.log(self);
    };

但老实说，你可能做得很好读取此运算符以掌握所有这些引用技巧。一旦掌握了基础知识，就不会 。另请查看来电和 apply 方法有关如何分享的详细信息/借方法

But honestly, you might do well reading up on the this operator to grasp all this referencing trickery. It's not that hard once you get the basics. Also check the call and apply methods for more details on how to "share/borrow" methods

这篇关于使用Knockout.js继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！