JavaScript构造函数详解


Posted in Javascript onDecember 27, 2015

构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象。

  构造函数注意事项:

1.默认函数首字母大写

2.构造函数并没有显示返回任何东西。new 操作符会自动创建给定的类型并返回他们,当调用构造函数时,new会自动创建this对象,且类型就是构造函数类型。

3.也可以在构造函数中显示调用return.如果返回的值是一个对象,它会代替新创建的对象实例返回。如果返回的值是一个原始类型,它会被忽略,新创建的实例会被返回。    

function Person( name){
        this.name =name;
      }
       var p1=new Person('John');

等同于:

function person(name ){
        Object obj =new Object();
        obj.name =name;
         return obj;
      }
       var p1= person("John");

4.因为构造函数也是函数,所以可以直接被调用,但是它的返回值为undefine,此时构造函数里面的this对象等于全局this对象。this.name其实就是创建一个全局的变量name。在严格模式下,当你补通过new 调用Person构造函数会出现错误。

 JavaScript构造函数详解

5.也可以在构造函数中用Object.defineProperty()方法来帮助我们初始化:

function Person( name){
        Object.defineProperty(this, "name"{
          get :function(){
             return name;
          },
           set:function (newName){
            name =newName;
          },
          enumerable :true, //可枚举,默认为false
           configurable:true //可配置
         });
      }  
       var p1=new Person('John');

6.在构造函数中使用原型对象      

//比直接在构造函数中写的效率要高的多
       Person.prototype.sayName= function(){
         console.log(this.name);
      };

但是如果方法比较多的话,大多人会采用一种更简洁的方法:直接使用一个对象字面形式替换原型对象,如下:      

Person.prototype ={
        sayName :function(){
           console.log(this.name);
        },
        toString :function(){
           return "[Person "+ this.name+"]" ;
        }
      };

这种方式非常流行,因为你不用多次键入Person.prototype,但有一个副作用你一定要注意:

JavaScript构造函数详解

使用字面量形式改写了原型对象改变了构造函数的属性,因此他指向Object而不是Person。这是因为原型对象具有一个constructor属性,这是其他对象实例所没有的。当一个函数被创建时,它的prototype属性也被创建,且该原型对象的constructor属性指向该函数。当使用对象字面量形式改写原型对象时,其constructor属性将被置为泛用对象Object.为了避免这一点,需要在改写原型对象的时候手动重置constructor,如下:

Person.prototype ={
        constructor :Person,
        
        sayName :function(){
           console.log(this.name);
        },        
        toString :function(){
           return "[Person "+ this.name+"]" ;
        }
      };

再次测试:

p1.constructor===Person

true 

p1.constructor===Object

false

p1 instanceof Person

true

Javascript 相关文章推荐
javascript add event remove event
Apr 07 Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
JS中cookie的使用及缺点讲解
May 13 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
vue首次渲染全过程
Apr 21 Vue.js
JavaScript生成二维码图片小结
Dec 27 #Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 #Javascript
Knockout自定义绑定创建方法
Dec 26 #Javascript
JavaScript动态设置div的样式的方法
Dec 26 #Javascript
JS插件overlib用法实例详解
Dec 26 #Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 #Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 #Javascript
You might like
PHP5 字符串处理函数大全
2010/03/23 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
php汉字转拼音的示例
2014/02/27 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
python字符串连接方式汇总
2014/08/21 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
使用python实现对元素的长截图功能
2019/11/14 Python
python实现图像拼接
2020/03/05 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
企业办公室岗位职责
2014/03/12 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis