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中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
vue实现图片上传到后台
Jun 29 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 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
smarty实例教程
2006/11/19 PHP
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
php中explode与split的区别介绍
2012/10/03 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
CI框架的安全性分析
2016/05/18 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
使用PDB模式调试Python程序介绍
2015/04/05 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
Django models filter筛选条件详解
2020/03/16 Python
Python内置异常类型全面汇总
2020/05/28 Python
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
彩色的非洲教学反思
2014/02/18 职场文书
小学生环保倡议书
2014/05/15 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
国庆横幅标语
2014/10/08 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
户外拓展训练感想
2015/08/07 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
图文详解nginx日志切割的实现
2022/01/18 Servers
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL