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 相关文章推荐
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
node+express制作爬虫教程
Nov 11 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
js数组常用最重要的方法
Feb 04 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
小程序中的箭头函数的具体使用
Jun 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
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
python如何实现excel数据添加到mongodb
2015/07/30 Python
pyqt5中动画的使用详解
2020/04/01 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
韩国商务邀请函
2014/01/14 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android