JS构造函数new的过程
造函数其实和普通函数本质上并无区别,唯一的区别有两个:
函数首字母大写,这个区别只是约定俗成的,便于区分。你实在要小写定义构造函数也完全没问题,所以这个区别可以忽略。
构造函数的调用需要用new操作符,而普通函数的调用又分很多种,但是都不会用到new操作符。所以,构造函数和普通函数的区别就在这个new操作符里,现在让我们来好好研究一下这个new操作符。
用new操作符创建对象时发生的事情:
(1)创建一个新对象;
(2)将构造函数的作用域赋给新对象(因此this就指向了这个新对象);
(3)执行构造函数中的代码(为这个新对象添加属性和方法);
(4)返回新对象;
通过new操作符后跟构造函数的方式创建的对象(实例),这个对象有一个constructor(构造函数)属性,该属性指向构造函数Person。
创建的对象,毫无疑问是Person的实例,同时也是Object的实例;所有对象皆继承自Object。
构造函数是定义在Global对象中的,在浏览器中,即为window对象。
注意:原本的构造函数是window对象的方法,如果不用new操作符而直接调用,那么构造函数的执行对象就 是window,即this指向了window。现在用new操作符后,this就指向了新生成的对象。理解这一步至关重要。
执行构造函数中的代码,看代码:
function Person(){
this.name = "Tiny Colder";
var age = 22;
window.age = 22;
}
var p = new Person();
alert(p.name)//Tiny Colder;
alert(p.age)//undefined;
alert(window.age)//22;
当用new操作符创建对象时,先创建了一个对象实例,然后执行代码。所以还在纠结,什么时候构造函数定义的属性会继承给实例对象的,都可以这么来看:
var p = new Object();
p.name = "Tiny Colder";
这是普通的创建对象,然后给对象添加属性的方法。如果每创建一个对象,都需要这么几行代码,无疑是糟糕的。这个需求就正好跟这一点对应:new操作符,自动执行构造函数里的代码。如此我们便可以省掉添加属性时重复冗余的代码。那么这些属性时如何添加到新生成的对象里的呢?
function Person(){
this.name = "Tiny Colder";
return {};
}
var p = new Person();
alert(p.name)//undefined;
一个对象就这么被创建出来了。
实际上,
var p = new Person();
和
var p = new Object();
Person.apply(p);
是一样的效果。
构造函数也是函数
任何函数,只要通过new操作符来调用,那么它就可以作为构造函数;任何函数,如果不通过new操作符来调用,那它与普通函数并无区别。
(1)当做构造函数调用
var person = new Person("CC",23);
(2)当做普通函数使用
Person("CC",23); //添加到window对象
console.log(window.name); //"CC"
console.log(window.age); //23
(3)在另一个对象的作用域中调用
var person = new Object();
Person.call(person,"CC",23);
console.log(person.name); //"CC"
console.log(person.age); //
构造函数的问题
使用构造函数的主要问题,就是每个方法都要在每个实例上重新创建一次。
var person1 = new Person("CC",23);
var person2 = new Person("VV",32);
两个实例都有sayName()方法,但是两个方法不是同一Function的实例,也就是说,两个实例上的同名函数是不相等的。
console.log(person1.sayName == person2.sayName); //false
JS构造函数new的过程的更多相关文章
- JS构造函数的用法和JS原型
$(function(){ var rec = new Rectangle(5, 10); //alert(rec.width + "*" + rec.height + " ...
- 谈谈JS构造函数
//构造函数 //使自己的对象多次复制,同时实例根据设置的访问等级可以访问其内部的属性和方法 //当对象被实例化后,构造函数会立即执行它所包含的任何代码 function myObject(msg) ...
- Class和普通js构造函数的区别
Class 在语法上更加贴合面向对象的写法 Class 实现继承更加易读.易理解 更易于写 java 等后端语言的使用 本质还是语法糖,使用 prototype Class语法 typeof Math ...
- c++中六种构造函数的实现以及9中情况下,构造函数的调用过程
六种构造函数的实现代码例如以下: #include<iostream> using namespace std; //c++中六种默认的构造函数 class Test { public: ...
- C++ 构造函数的执行过程(一) 无继承
引言 C++ 构造函数的执行过程(一) 无继承 本篇介绍了在无继承情况下, C++构造函数的执行过程, 即成员变量的构建先于函数体的执行, 初始化列表的数量和顺序并不对构造函数执行顺序造成任何影响 ...
- (转载)js引擎的执行过程(二)
概述 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍了语法分析和预编译阶段,那么我们先做个简单概括,如下: 语法分析: 分别对加载完成的代码块进行语法检验,语法正 ...
- (转载)js引擎的执行过程(一)
概述 js是一种非常灵活的语言,理解js引擎的执行过程对我们学习javascript非常重要,但是网上讲解js引擎的文章也大多是浅尝辄止或者只局部分析,例如只分析事件循环(Event Loop)或者变 ...
- js 构造函数 & 静态方法 & 原型 & 实例方法
js 构造函数 & 静态方法 & 原型 & 实例方法 ES5 "use strict"; /** * * @author xgqfrms * @licens ...
- js构造函数,索引数组和属性的属性
本文主要介绍和小结js的构造函数,关联数组的实现方式和使用,及不可变对象和它的实现方式及他们使用过程中要注意的点 <script> function p(){ var len=argume ...
随机推荐
- 【maven】maven下载依赖jar的源码
mvn dependency:sourcesmvn dependency:resolve -Dclassifier=javadoc 命令使用方法:首先进入到相应的pom.xml目录中,然后执行以上命令 ...
- arcpy地理处理工具案例教程-景观形状指数计算
arcpy地理处理工具案例教程-景观形状指数计算 商务合作,科技咨询,版权转让:向日葵,135-4855_4328,xiexiaokui#qq.com 使用方法:输入要素类即可,其余参数均默认. 商务 ...
- Python80个练手项目列表
原文地址:https://www.shiyanlou.com/questions/102676/?utm_source=baidu&utm_medium=cpc&utm_campaig ...
- C++ 已知两个时间(年月日)求日期差
转载:https://blog.csdn.net/flyyufenfei/article/details/79796035 #include<iostream> #include < ...
- 修改Linux系统时间EDT改为CST
今天发现一台服务器时间比北京时间慢 12 个小时,使用 date 命令后发现是: 2019年 06月 04日 星期二 21:50:33 EDT EDT 时间即美国东部时间.这里要改为北京时间即可: m ...
- MyBatis 返回 List mapperxml怎么写
转: MyBatis 返回 List mapperxml怎么写? 原创 微wx笑 发布于2018-06-20 13:59:23 阅读数 10742 收藏 展开 有时候,我们不需要整个表的所有字段,而是 ...
- 【APM】Pinpoint 使用教程(二)
本例介绍Pinpoint使用教程 Pinpoint安装部署参考:[APM]Pinpoint 安装部署(一) 查看应用调用关系拓扑图 进入pintpoint->选择应用-〉选择查看的时间周期,即可 ...
- socks5 代理服务器ss5配置
安装 yum install pam-devel openldap-devel openssl-devel yum -y install gcc automake make pam-devel ope ...
- JVM方法栈的工作过程,方法栈和本地方法栈有什么区别。
JVM的本地方法栈 对于一个运行中的Java程序而言,它还可能会用到一些跟本地方法相关的数据区.当某个线程调用一个本地方法时,它就进入了一个全新的并且不再受虚拟机限制的世界.本地方法可以通过本地方 ...
- 【转帖】HBase读写的几种方式(二)spark篇
HBase读写的几种方式(二)spark篇 https://www.cnblogs.com/swordfall/p/10517177.html 分类: HBase undefined 1. HBase ...