为什么声明的方法不在对象的属性列表中

时间:2016-03-16 13:56:05

标签: javascript class

我创建了两个对象。一个是dog1,另一个是dog2。它们分别是使用构造函数和类创建的。它们都有一个bark方法,但当我在控制台中查看这两个对象时用类创建的对象没有树皮方法。这是什么原因?但我可以使用dog2.bark()

访问bark方法

enter image description here

<html>
<body>
<input type='button' value='bark' id='mydog' />
<input type='button' value='bark2' id='dog2'/>
<script>
var btn=document.getElementById('mydog');
var btn2=document.getElementById('dog2');
var dog1=new Dog1();
function Dog1(){
   this.bark=function(){
      console.log('wooff');
   }
}


console.log(dog1);
btn.addEventListener('click',function(e){

    dog1.bark();
});

class Dog2{

   constructor(){
      this.sound='wooff';
   }
   bark(){
      console.log(this.sound);
   }
}
var dog2=new Dog2();
console.log(dog2);
btn2.addEventListener('click',function(){
    dog2.bark();
});
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

class语法是围绕旧式写作方式的语法糖:

function Dog2() {
    this.sound = 'woof';
}

Dog2.prototype.bark = function () {
    console.log(this.sound);
}

那是原型继承;如果在控制台中展开/记录__proto__属性,您将在对象上找到该方法。 Dog2的所有实例都通过原型共享相同的bark方法;如果您为每个bark附加一个新的this方法,该方法将“直接”在每个对象上,但也会不必要地使用更多资源,因为您有相同的多个相同的实现。