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 ajax BUG:object doesn't support this property or method
Jul 06 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
layui导出所有数据的例子
Sep 10 Javascript
vue实现计步器功能
Nov 01 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 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版国家代码、缩写查询函数代码
2011/08/14 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
JavaScript中的其他对象
2008/01/16 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python map和reduce函数用法示例
2015/02/26 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
浅谈Python3中print函数的换行
2020/08/05 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
优秀中专生推荐信
2013/11/17 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
高中校园广播稿
2014/10/21 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
党员承诺书范文2015
2015/04/27 职场文书
部门主管竞聘书
2015/09/15 职场文书
导游词之张家口
2019/12/13 职场文书