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 相关文章推荐
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
js中对象与对象创建方法的各种方法
Feb 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实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
django 中QuerySet特性功能详解
2019/07/25 Python
解决python运行效率不高的问题
2020/07/20 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
工程部部长岗位职责
2015/02/12 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
《我是什么》教学反思
2016/02/16 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android