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++类的构造函数详解 ...
随机推荐
- HDU 4318 Power transmission(最短路)
http://acm.hdu.edu.cn/showproblem.php?pid=4318 题意: 给出运输路线,每条路线运输时都会损失一定百分比的量,给定起点.终点和初始运输量,问最后到达终点时最 ...
- Intellij idea注册码失效
从网上下载idea需要输入激活码,晚上用的激活码大多是同一个,但是上次使用的时候突然弹窗告诉我注册码失效了,在网上找到一个新的方法 在注册界面有几个选项,我们常用的是Activation Code,现 ...
- TRMM数据在arcgis打开
基本思路:地图配准 1将投影设置为plate carree(world) ,是在投影坐标系统下的世界中选择,当然为了输入坐标方便,设置属性genral中单位为度,显示为度分秒. 2 首先,要知道打开后 ...
- HTML 标记 3 —— CSS
<style type="text/css">body { background-color: #F00;} p{ color:#0F0; } .自己定义 { colo ...
- [C#]获取连接MySql数据库及常用的CRUD操作
测试如下: 首先添加引用:MySql.Data.dll 链接:http://pan.baidu.com/s/1dEQgLpf 密码:bnyu *将链接数据库的信息放入配置文件中(app.config) ...
- Asp.net core 学习笔记 ( User Secrets )
参考 : http://cnblogs.com/nianming/p/7068253.html https://docs.microsoft.com/en-us/aspnet/core/securit ...
- 第 2 章 容器架构 - 008 - Docker 组件如何协作?
容器启动过程如下: Docker 客户端执行 docker run 命令. Docker daemon 发现本地没有 httpd 镜像. daemon 从 Docker Hub 下载镜像. 下载完成, ...
- RabbitMQ消息发布时的权衡
在进行本篇文章的学习之前,你需要先阅读 https://www.cnblogs.com/duanjt/p/10057330.html.以便对Java访问RabbitMQ的基础用法有所了解. 一.失败通 ...
- js数组,字符串,json互相转换函数有哪些
js数组,字符串,json互相转换函数有哪些 一.总结 一句话总结: JSON.stringify(arr) JSON.parse(jsonString) str.split('') array.jo ...
- Spring 拦截器实现+后台原理(MethodInterceptor)
MethodInterceptor MethodInterceptor是AOP项目中的拦截器(注:不是动态代理拦截器),区别与HandlerInterceptor拦截目标时请求,它拦截的目标是方法. ...