javascript 对象原型调用

Question

b2和b3没有触发原型函数，没有产生错误？如何时尚的调用原型函数？

<html>
<head>

<script type="text/javascript">
 function newObj(){
  this.obj_val= 7;
 }
 var trigger_f0 = function(){
  alert("here 0");          // trigger FINE! (ok)
 }
 newObj.prototype.trigger_f2 = function (){ // no triggering off click event
  alert("here 2");
 }
 newObj.prototype.trigger_f3 = function (){  // not triggering off click event
  alert("obj value:" + newObj.obj_val);
 }

 var init = function(){
  b3.addEventListener('click', newObj.trigger_f3, false);
  b2.addEventListener('click', newObj.trigger_f2, false);
  b1.addEventListener('click', trigger_f0, false);
 }

 window.addEventListener('DOMContentLoaded', init, false);
 </script>
 
 </head>
<body>
<button id="b1">B1</button>
<button id="b2">B2</button>
<button id="b3">B3</button>

</body>

</html>

Answer 1

你需要创建一个实例就像从构造函数中获取一个对象

var a=new newObj()

然后访问属性。并将 newObj.obj_val 更改为

new newObj().obj_val

function newObj() {
  this.obj_val = 7;
}
var trigger_f0 = function() {
  alert("here 0"); // trigger FINE! (ok)
}
newObj.prototype.trigger_f2 = function() { // no triggering off click event
  alert("here 2");
}
newObj.prototype.trigger_f3 = function() { // not triggering off click event
  alert("obj value:" + new newObj().obj_val);
}
var a = new newObj();

b3.addEventListener('click', a.trigger_f3, false);
b2.addEventListener('click', a.trigger_f2, false);
b1.addEventListener('click', trigger_f0, false);

<body>
  <button id="b1">B1</button>
  <button id="b2">B2</button>
  <button id="b3">B3</button>

</body>

Answer 2

当您创建函数并将属性添加到其 .prototype 时，该函数不会接收它们。

相反，当您使用该函数作为构造函数创建 instance/object 时，该对象将获得这些函数。

function foo() {}
foo.prototype.fn = function(){}

var x = new foo()

console.log(foo.fn) // undefined
console.log(x.fn)   // function (){}

在你的情况下，

// ...

var obj = newObj();

var init = function(){
  b3.addEventListener('click', obj.trigger_f3, false);
  b2.addEventListener('click', obj.trigger_f2, false);
  b1.addEventListener('click', trigger_f0, false);
}

window.addEventListener('DOMContentLoaded', init, false);

javascript 对象原型调用

javascript object prototype call

javascript

prototype

domcontentloaded