JavaScript构造函数详解
构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象。
构造函数注意事项:
1.默认函数首字母大写
2.构造函数并没有显示返回任何东西。new 操作符会自动创建给定的类型并返回他们,当调用构造函数时,new会自动创建this对象,且类型就是构造函数类型。
3.也可以在构造函数中显示调用return.如果返回的值是一个对象,它会代替新创建的对象实例返回。如果返回的值是一个原始类型,它会被忽略,新创建的实例会被返回。
|
1
2
3
4
|
function Person( name){ this.name =name; } var p1=new Person('John'); |
等同于:
|
1
2
3
4
5
6
|
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构造函数会出现错误。

5.也可以在构造函数中用Object.defineProperty()方法来帮助我们初始化:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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.在构造函数中使用原型对象
|
1
2
3
4
|
//比直接在构造函数中写的效率要高的多 Person.prototype.sayName= function(){ console.log(this.name); }; |
但是如果方法比较多的话,大多人会采用一种更简洁的方法:直接使用一个对象字面形式替换原型对象,如下:
|
1
2
3
4
5
6
7
8
|
Person.prototype ={ sayName :function(){ console.log(this.name); }, toString :function(){ return "[Person "+ this.name+"]" ; } }; |
这种方式非常流行,因为你不用多次键入Person.prototype,但有一个副作用你一定要注意:

使用字面量形式改写了原型对象改变了构造函数的属性,因此他指向Object而不是Person。这是因为原型对象具有一个constructor属性,这是其他对象实例所没有的。当一个函数被创建时,它的prototype属性也被创建,且该原型对象的constructor属性指向该函数。当使用对象字面量形式改写原型对象时,其constructor属性将被置为泛用对象Object.为了避免这一点,需要在改写原型对象的时候手动重置constructor,如下:
|
1
2
3
4
5
6
7
8
9
10
|
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构造函数详解的更多相关文章
- [原创]JavaScript继承详解
原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...
- JavaScript事件详解-jQuery的事件实现(三)
正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
- JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- JavaScript正则表达式详解(一)正则表达式入门
JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...
- JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解
二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...
- [转]c++类的构造函数详解
c++构造函数的知识在各种c++教材上已有介绍,不过初学者往往不太注意观察和总结其中各种构造函数的特点和用法,故在此我根据自己的c++编程经验总结了一下c++中各种构造函数的特点,并附上例子,希望对初 ...
- JavaScript事件详解-zepto的事件实现
zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...
- javascript 函数详解2 -- arguments
今天我们接着上篇文章来继续javascript函数这个主题.今天要讲的是函数对像中一个很重要的属性--arguments. 相关阅读: javascript 函数详解1 -- 概述 javascrip ...
- C++构造函数详解及显式调用构造函数
来源:http://www.cnblogs.com/xkfz007/archive/2012/05/11/2496447.html c++类的构造函数详解 ...
随机推荐
- C#解析html文档类库HtmlAgilityPack下载地址
新:http://html-agility-pack.net/?z=codeplex 原:http://htmlagilitypack.codeplex.com/
- SMTP发送邮件
SMTP是发送邮件的协议,Python内置对SMTP的支持,可以发送纯文本邮件.HTML邮件以及带附件的邮件. Python对SMTP支持有smtplib和email两个模块,email负责构造邮件, ...
- 使用CSS渐变
转载自:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients CSS 渐变 是在 CSS3 Image ...
- RESTful 个人理解总结
一.什么是RESTful 面向资源 简单的说:RESTful是一种架构的规范与约束.原则,符合这种规范的架构就是RESTful架构. 先看REST是什么意思,英文Representational ...
- CentOS7 下更改源
在CentOS 7下更改yum源与更新系统. [1] 首先备份/etc/yum.repos.d/CentOS-Base.repo cp /etc/yum.repos.d/CentOS-Base.rep ...
- Flask请求上下文request
- 使用git命令行解决冲突
文章转载自:https://blog.csdn.net/sureSand/article/details/78765727 使用git和提交的代码有所冲突,用IDE自带的git工具功能多了反而不知道怎 ...
- log4j动态监听配置修改
一般情况下,log4j的配置文件是log4j.properties.但是每次我们修改了配置文件之后程序并不会自动去加载,而需要我们去重启程序.那么怎么样才能让程序不用重启就监听到变化呢.代码如下: p ...
- delphi7产生条码
导读: 1 通过菜单”Component”下的”Import ActiveX”将“Microsoft Access Barcode Control 9.0”控件引入.这个控件(msbcode9.occ ...
- 雷林鹏分享:XML 元素
XML 元素 XML 文档包含 XML 元素. 什么是 XML 元素? XML 元素指的是从(且包括)开始标签直到(且包括)结束标签的部分. 一个元素可以包含: 其他元素 文本 属性 或混合以上所有. ...