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操作数组详解
Dec 17 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
小程序实现投票进度条
Nov 20 Javascript
Javascript中window.name属性详解
Nov 19 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
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
PHP多进程编程实例详解
2017/07/19 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
python SVM 线性分类模型的实现
2019/07/19 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
Python bisect模块原理及常见实例
2020/06/17 Python
使用Python pip怎么升级pip
2020/08/11 Python
浅析Python中字符串的intern机制
2020/10/03 Python
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
Ajax的工作原理
2015/12/04 面试题
应用心理学个人求职信范文
2013/12/11 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js