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 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
浅析javascript 定时器
Dec 23 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
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
PHP 批量删除数据的方法分析
2009/10/30 PHP
解析php中memcache的应用
2013/06/18 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
node使用request请求的方法
2019/12/20 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
python os模块简单应用示例
2019/05/23 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
如何使用Pytorch搭建模型
2020/10/26 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
艺术用品:Arteza
2018/11/25 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
几道PHP的面试题
2012/05/19 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
双拥工作宣传标语
2014/06/26 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
作弊检讨书
2015/01/27 职场文书
网络销售员岗位职责
2015/04/11 职场文书
社区法制宣传日活动总结
2015/05/05 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
JS实现数组去重的11种方法总结
2022/04/04 Javascript