首页 > 编程笔记 > JavaScript笔记 > JS面向对象编程
阅读:72
JS构造函数精讲
JavaScript 构造函数(Constructor)也称为构造器、类型函数,功能类似对象模板,一个构造函数可以生成任意多个实例,实例对象具有相同的属性、行为特征,但不相等。
构造函数有两个显著特点。
函数构造可以接收参数,以便初始化实例对象。如果不需要传递参数,可以省略小括号,直接使用 new 命令斯奥用,下面两行代码是等价的。
为了避免误用,最有效的方法是在函数中启用严格模式。代码如下。
或者使用 if 对 this 进行检测,如果 this 不是实例对象,则强迫返回实例对象。
为什么会出现这种情况?这与 new 命令解析过程有关系,使用 new 命令调用函数的解析过程如下:
定义构造函数
在语法和用法上,构造函数与普通函数没有任何区别。定义构造函数的方法如下:function 类型名称 (配置参数) { this.属性1 = 属性值1; this.属性2 = 属性值2; ... this.方法1 = function () { //处理代码 }; ... //其他代码,可以包含return语句 }建议构造函数的名称首字母大写,以便与普通函数进行区分。
构造函数有两个显著特点。
- 函数体内使用 this,引用将要生成的实例对象。
- 必需使用 new 命令调用函数,生成实例对象。
示例
下面示例演示定义一个构造函数,包含了两个属性和一个方法。function Point (x, y) { //构造函数 this.x = x; //私有属性 this.y = y; //私有属性 this.sum = function () { //方法 return this.x + this.y; } }在上面代码中,Point 就是构造函数,它提供模板,用来生成实例对象。
调用构造函数
使用 new 命令可以调用构造函数,创建实例,并返回这个对象。示例
下面使用 new 命令调用构造函数,生成两个实例,然后分别读取属性,调用方法 sum()。function Point (x, y) { //构造函数 this.x = x; //私有属性 this.y = y; //私有属性 this.sum = function () { //私有方法 return this.x +this.y; } } var p1 = new Point(100, 200); //实例化对象1 var p2 = new Point(300, 400); //实例化对象2 console.log(p1.x); //100 console.log(p2.x); //300 console.log(p1.sum()); //300 console.log(p2.sum()); //700
函数构造可以接收参数,以便初始化实例对象。如果不需要传递参数,可以省略小括号,直接使用 new 命令斯奥用,下面两行代码是等价的。
var p1 = new Point(); var p2 = new Point;如果不使用 new 命令,直接使用小括号调用构造函数,这时构造函数就是普通函数,不会生成实例对象,this 就代表调用函数的对象,在客户端指代全局对象 window。
为了避免误用,最有效的方法是在函数中启用严格模式。代码如下。
function Point (x, y) { //构造函数 'use strict'; //启用严格模式 this.x = x; //私有属性 this.y = y; //私有属性 this.sum = function () { //私有方法 return this.x + this.y; } }这样调用构造函数时,必须使用 new 命令,否则将抛出异常。
或者使用 if 对 this 进行检测,如果 this 不是实例对象,则强迫返回实例对象。
function Point(x, y) { //构造函数 if (! (this instanceof Point)) return new Point(x, y); //检测this是否为实例对象 this.x = x; //私有属性 this.y = y; //私有属性 this.sum = function () { //私有方法 return this.x + this.y; } }
构造函数的返回值
构造函数运行使用 return 语句。如果返回值为简单值,则将被忽略,直接返回 this 指代的实例对象;如果返回值为对象,则将覆盖 this 指代的实例,返回 return 后面跟随的对象。为什么会出现这种情况?这与 new 命令解析过程有关系,使用 new 命令调用函数的解析过程如下:
- 当使用 new 命令调用函数时,先创建一个空对象,作为实例返回。
- 设置实例的原型,指向构造函数的 prototype 属性。
- 设置构造函数体内的 this 值,让它指向实例。
- 开始执行构造函数内部的代码。
- 如果构造函数内部有 return 语句,而且 return 后面跟着一个对象,会返回 return 语句指定的对象;否则会忽略 return 返回值,直接返回 this 对象。
示例
下面示例在构造函数内部定义 return 返回一个对象直接量,当使用 new 命令调用构造函数时,返回的不是 this 指代的实例,而是这个对象直接量,因此当读取 x 和 y 属性值时,与预期的结果是不同的。function Point (x, y) { //构造函数 this.x = x; //私有属性 this.y = y; //私有属性 return {x : true, y : false} } var p1 = new Point(100, 200); //实例化对象1 console.log(p1.x); //true console.log(p1.y); //false
引用构造函数
在普通函数内,使用 arguments.callee 可以引用函数自身。如果在严格模式下,是不允许使用 arguments.cellee 引用函数的,这时可以使用 new.target 来访问构造函数。示例
function Point (x, y) { //构造函数 'use strict'; //启用严格模式 if (! (this instanceof new.target)) return new new.target(x, y); //检测this是否为实例对象 this.x = x; //私有属性 this.y = y; //私有属性 } var p1 = new Point(100, 200); //实例化对象1 console.log(p1.x); //100IE 浏览器对其支持不是很完善,使用时要考虑兼容性。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频