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 尚未实现错误解决办法
Nov 27 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 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中for循环语句的几种变型
2007/03/16 PHP
php 中文处理函数集合
2008/08/27 PHP
php计算十二星座的函数代码
2012/08/21 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
js友好的时间返回函数
2016/08/24 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
python del()函数用法
2013/03/24 Python
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
详解python分布式进程
2018/10/08 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
护士业务学习心得体会
2016/01/25 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
python数字图像处理之图像的批量处理
2022/06/28 Python