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 居中漂浮广告
Mar 21 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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数据库操作类(改自discuz)
2010/07/03 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
python多线程threading.Lock锁用法实例
2014/11/01 Python
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
django中模板的html自动转意方法
2018/05/27 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
python3.6编写的单元测试示例
2019/08/17 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
python使用建议与技巧分享(二)
2020/08/17 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
介绍一下except的用法和作用
2015/01/22 面试题
大学团日活动新闻稿
2014/09/10 职场文书
邀请书格式范文
2015/02/02 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书