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 相关文章推荐
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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对大文件进行读取操作的实现代码
2013/01/23 PHP
php遍历CSV类实例
2015/04/14 PHP
javaScript call 函数的用法说明
2010/04/09 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
理解JavaScript原型链
2016/10/25 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
vue 中的 render 函数作用详解
2020/02/28 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
python3多线程知识点总结
2019/09/26 Python
python返回数组的索引实例
2019/11/28 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
银行优秀员工事迹
2014/02/06 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
副董事长岗位职责
2014/04/02 职场文书
小学生作文评语大全
2014/04/21 职场文书
学校火灾防控方案
2014/06/09 职场文书
中学生逃课检讨书
2015/02/17 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
Go语言怎么使用变长参数函数
2022/07/15 Golang