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动态调整iframe高度的代码
Apr 10 Javascript
很可爱的输入框
Aug 03 Javascript
IE下js调试工具Companion.JS
Oct 15 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
angularjs实现table增加tr的方法
Feb 27 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 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作的文本留言本的例子(四)
2006/10/09 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
vue构建动态表单的方法示例
2018/09/22 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
python中强大的format函数实例详解
2018/12/05 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
django修改models重建数据库的操作
2020/03/31 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
Python实现EM算法实例代码
2020/10/04 Python
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
幼儿园感恩节活动方案2014
2014/10/11 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
python实现简单的聊天小程序
2021/07/07 Python