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面向对象、prototype、call()、apply()
May 14 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
js实现索引图片切换效果
Nov 21 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
JavaScript中reduce()的用法
May 11 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 static局部静态变量和全局静态变量总结
2014/03/02 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
用JS剩余字数计算的代码
2008/07/03 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
python实现哈希表
2014/02/07 Python
线程和进程的区别及Python代码实例
2015/02/04 Python
详解Swift中属性的声明与作用
2016/06/30 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
经典演讲稿开场白
2014/08/25 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技