码迷,mamicode.com
首页 > Web开发 > 详细

js深入学习-js prototype constructor属性区别

时间:2014-09-11 03:27:51      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:js深入学习   prototype   constructor   js深入学习-js prototype   

在很多js 插件中出现这两个属性的频率很高,我自己写插件时,也用到过,知道用,不知道具体的区别,今天研究了下,

constructor 返回的是对象(类型的实例)的构造函数,通过prototype 添加的属性和方法不会返回。

prototype 返回的是类型的原型,不会饭后构造函数部分。

实例如下:

 <html>
<head>
<script type="text/javascript">
   var cat=function (name,sex){
      this.name=name;
      this.sex=sex;
      this.print=function(){
        console.log("name:"+name+"  \r\n sex:"+sex);
       }


     }
  cat.prototype.color="red";
  cat.prototype.printColor=function(){
  console.log("color:"+this.color+"\r\n name"+this.name);
   }
  var myCat=new cat("cavent","boy");
</script >
</head>
<body>
<h1 id="object">js prototype属性和constructor属性</h1>
</body>
</html>

在谷歌浏览器中的控制台,输入myCat.constructor ,显示如下

function (name,sex){
      this.name=name;
      this.sex=sex;
      this.print=function(){
        console.log("name:"+name+"  \r\n sex:"+sex);
       }

     } 
输入cat.prototype 显示如下:

Object {color: "red", printColor: function}
color: "red"
constructor: function (name,sex){
printColor: function (){
arguments: null
caller: null
length: 0
name: ""
prototype: Object
__proto__: function Empty() {}
<function scope>
__proto__: Object

截图如下:

bubuko.com,布布扣





js深入学习-js prototype constructor属性区别

标签:js深入学习   prototype   constructor   js深入学习-js prototype   

原文地址:http://blog.csdn.net/xmroom/article/details/39196817

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!