javascript - Why can't I refer to the inherited method from JavaScript prototype within method

Question

When I use JavaScript prototype to inherit a object and want to use it's method in the following way:

var Father = {
  name:'Father',
  act:function(){
    console.log('the name is '+this.name);
  }
}
var Son = function(){
   act();
}
Son.__proto__ = Father;
Son();

This doesn't work, when Js Engine run Son(), it should search act() through it's prototype chain.

But why it only works the following way:

var Father = {
  name:'Father',
  act:function(){
    console.log('the name is '+this.name);
  }
}
var Son = {
  name:'Son'
}
Son.__proto__=Father;
Son.act();

标签： javascriptprototype

Answer 1

它的长短是act()当您尝试使用它时该功能不存在。

仅仅因为你想Son继承Father并不意味着 JS 知道你想这样做。当您尝试使用act()JS 时，您不知道您想要绑定Son到Father……就 JS 而言，它们是完全不同的函数/对象/等。对于所有 JS 所知，它们具有绝对零关系。

同样，您需要act在适当的范围内使用一个实际的函数——JS 不知道你的意图是什么——你如何期望 JS 知道从哪个对象中提取act()......如果有一个Mother带有act方法的对象怎么办？ .

第一个片段： 要解决这个问题，只需构建一个act()函数......

var Father = {
  name:'Father',
  act:function(){
    console.log('the name is '+this.name);
  }
}

function act() {
  return this.name;
}

var Son = function(){
   act();
}

Son.__proto__ = Father;
Son.act();

第二个片段： 这与尝试没有什么不同：

var Father = {
  name:'Father',
  act:function(){
    console.log('the name is '+this.name);
  }
}

var Son = function(){
  // using 'act();' here is no different than trying:
  somethingThatDoesntExist();
}

Son.__proto__ = Father;

try   { Son();                      } 
catch { console.log("Oh no error\r\n\r\n"); }

// If you don't assign anything..
// It will work... because of inheritence..
Son = {} // MAKING SON AN OBJECT NOT A FUNCTION
Son.__proto__ = Father;
// If you don't change the name, it will log: 'the name is Father'
Son.name = "Son"; 
console.log("Son as an object {} ... we had to do `Son.name = 'Son'` here");
Son.act();
console.log("");

// But if you change Son to be a function, then inherit, you dont have to 
// change the name... 2 completely different things....
Son = function(){}
Son.__proto__ = Father;
console.log("Son as an function(){} ... we DID NOT have to do `Son.name = 'Son'` here since Son.name will be the name of the function, which is Son");
Son.act();

第三个片段： 或者如果你这样做了：

var Father = {
  name: 'Father',
  act: function() {
    console.log('the name is ' + this.name);
  }
}

var Son = function() {
  function act() {
    return this.name;
  }
}

Son.__proto__ = Father;
Son.act();

第四段 或者你可以这样做：

var Father = { 
  name:'Father', 
  act:function(){ 
    console.log('the name is '+this.name); 
  } 
} 

var Son = { 
  name:'Son'
} 

Son.__proto__ = Father; 

Son.act(); 

第五段 或..

var Father = { 
  name:'Father', 
  act:function(){ 
    console.log('the name is '+this.name); 
  } 
} 

var Son = { 
  anythingYouWantHere: function() {
    console.log("anythingYouWantHere " + this.name);
  }
} 

try {
  Son.act() // YOU WILL GET AN ERROR HERE
} catch {
  console.log("YOU WILL GET AN ERROR HERE");
}

Son.__proto__ = Father; 

Son.act(); // the name is Father
Son.anythingYouWantHere(); // anythingYouWantHere Father

Son.name = "Son";
Son.act(); // the name is Son
Son.anythingYouWantHere(); // anythingYouWantHere Son

Son.act = function() {
  console.log("I have now changed act! the name is " + this.name);
}

Son.act(); // I have now changed act! the name is Son