文档章节

new操作符

 依约
发布于 2016/09/11 10:25
字数 877
阅读 2
收藏 0

一. new是干嘛的?

new操作符用来生成一个新的对象, 它后面必须跟上一个函数(否则, 会抛出TypeError异常), 这个

函数就是我们常说的构造函数.

 

二. new操作构造函数生成实例的过程

(1) 首先, 当我们使用new操作符时, js会先创建一个空的对象;

(2) 然后, 构造函数中的this指向该空对象;

(3) 其次, 在构造函数中通过操作this, 来给这个空对象赋予相应的属性;

(4) 最后, 返回这个经过处理的"空对象"(此时, 对象已经不是空的了).

 

三. new操作构造函数的注意事项

(1) 如果构造函数的返回值是一个原始类型(非引用对象, 如字符串), 那么返回值为new创建的"空对象", 如:

       var obj = new function() { return "code";};
       alert(obj); // [object object]
 

(2) 如果构造函数的返回值是一个引用对象(数组, 对象, 函数等), 那么返回值会覆盖new创建的"空对象", 如:
       var obj = new function() { return new String("code"); };
       alert(obj); // "code"

四.原理

var obj = new Base();

 

这样代码的结果是什么,我们在Javascript引擎中看到的对象模型是:

new操作符具体干了什么呢?其实很简单,就干了三件事情。

 

 

var obj  = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

 

第一行,我们创建了一个空对象obj
第二行,我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象
第三行,我们将Base函数对象的this指针替换成obj,然后再调用Base函数,于是我们就给obj对象赋值了一个id成员变量,这个成员变量的值是”base”,关于call函数的用法,请参看陈皓《Javascript 面向对象编程》文章

 


如果我们给Base.prototype的对象添加一些函数会有什么效果呢?
例如代码如下:

 

 

Base.prototype.toString = function() {

    return this.id;

}

 

那么当我们使用new创建一个新对象的时候,根据__proto__的特性,toString这个方法也可以做新对象的方法被访问到。于是我们看到了:
构造子中,我们来设置‘类’的成员变量(例如:例子中的id),构造子对象prototype中我们来设置‘类’的公共方法。于是通过函数对象和Javascript特有的__proto__与prototype成员及new操作符,模拟出类和类实例化的效果。

五。代码示例

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <title>Insert title here</title>  
  6. </head>  
  7. <body>  
  8. <script type="text/javascript">  
  9. /*没有返回值  
  10. function Test1(str) {  
  11.     this.a = str;  
  12. }  
  13. //new  
  14. var myTest1 = new Test1('myTest1');  
  15. alert(myTest1);//object Object  
  16. //no new  
  17. var myTest1 = Test1('myTest1');  
  18. alert(myTest1);//undefined  
  19. */  
  20.   
  21. /*有返回值  
  22. function Test2(str) {  
  23.     this.a = str;  
  24.     return this.a;  
  25. }  
  26. //new   
  27. var myTest2 = new Test2('myTest2');  
  28. alert(myTest2);//object Object myTest2.a就是myTest2  
  29. //no new  
  30. var myTest2 = Test2('myTest2');  
  31. alert(myTest2);//myTest2  
  32. */  
  33.   
  34. /*返回值为new对象  
  35. function Test3(str) {  
  36.     this.a = str;  
  37.     return new String(this.a);  
  38. }  
  39. var myTest3 = new Test3('myTest3');  
  40. alert(myTest3);//String myTest3  
  41. */  
  42.   
  43. /* new this  
  44. function Test4(str) {  
  45.     this.a = str;  
  46. }  
  47. //对象的get_string方法  
  48. Test4.prototype.get_string = function() {  
  49.     return this.a;//this指这个新对象 this.a 新对象的a属性值  
  50. }  
  51. var myTest4 = new Test4('myTest4');  
  52. alert(myTest4.get_string());//myTest4  
  53. */  
  54.   
  55. /*js 伪继承 伪类  
  56. function Test5(str) {  
  57.     this.a = str;  
  58. }  
  59. Test5.prototype.get_Test5String = function() {  
  60.     return this.a;  
  61. }  
  62. var myTest5 = new Test5('myTest5');  
  63. //alert(myTest5.get_Test5String());  
  64. function Test6(str) {  
  65.     this.b = str;  
  66. }  
  67. Test6.prototype = new Test5('myTest5');//必须放在get_Test6String方法前  不然就冲掉了  
  68. Test6.prototype.get_Test6String = function() {  
  69.     return this.b;  
  70. }  
  71. var myTest6 = new Test6('myTest6');  
  72. alert(myTest6.get_Test6String());//myTest6  
  73. alert(myTest6.get_Test5String());//myTest5  
  74. */  
  75. </script>  
  76. </body>  
  77. </html>  

原帖:

  http://www.planabc.net/2008/02/20/javascript_new_function/

   http://www.javaeye.com/topic/288808

本文转载自:http://blog.163.com/thinker_creator/blog/static/1019331492009102093336201/

下一篇: position
粉丝 0
博文 7
码字总数 0
作品 0
武汉
私信 提问

暂无文章

spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
43分钟前
2
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
6
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
昨天
7
0
轻量级 HTTP(s) 代理 TinyProxy

CentOS 下安装 TinyProxy yum install -y tinyproxy 启动、停止、重启 # 启动service tinyproxy start# 停止service tinyproxy stop# 重启service tinyproxy restart 相关配置 默认...

Anoyi
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部