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 相关文章推荐
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
jQuery操作css样式
May 15 jQuery
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
Apr 09 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+mysql保存和输出文件
2006/10/09 PHP
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php 生成随机验证码图片代码
2010/02/08 PHP
destoon数据库表说明汇总
2014/07/15 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
python写的一个文本编辑器
2014/01/23 Python
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
python 剪切移动文件的实现代码
2018/08/02 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
介绍一下Java的事务处理
2012/12/07 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
财务工作个人求职的自我评价
2013/12/19 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
学校安全责任书
2014/04/14 职场文书
合同意向书范本
2014/07/30 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
运动会通讯稿50字
2015/07/20 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书