当前位置: 首页 > news >正文

[js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示

javascript面向对象编程方式,对于初学者来说,会比较难懂. 要学会面向对象以及使用面向对象编程,理解对象的创建在内存中的表示,至关重要.

首先,我们来一段简单的对象创建代码

 1         var obj = new Object();
 2         obj.userName = 'ghostwu';
 3         obj.showUserName = function(){
 4             return obj.userName;
 5         };
 6         var obj2 = new Object();
 7         obj2.userName = '卫庄';
 8         obj2.showUserName = function(){
 9             return obj2.userName;
10         };
11 
12         console.log( obj.showUserName() ); //ghostwu
13         console.log( obj2.showUserName() ); //卫庄

上例,我们创建了两个对象obj和obj2, 如果有多个类似对象,我们可以通过函数封装,这种函数封装方式,在设计模式里面叫工厂模式

1         function createObj( uName ){
 2             var obj = new Object();
 3             obj.userName = uName;
 4             obj.showUserName = function(){
 5                 return obj.userName;
 6             }
 7             return obj;
 8         }
 9         var obj1 = createObj( 'ghostwu' );
10         var obj2 = createObj( '卫庄' );
11         console.log( obj1.showUserName() ); //ghostwu
12         console.log( obj2.showUserName() ); //卫庄

工厂模式简化了创建多个类似对象的过程,但是却不能识别对象的类型,为了识别对象的创建类型,我们可以使用构造函数方式.

什么是构造函数方式?

其实我们js很多创建内存对象的方式 都是构造函数方式,如,数组: var arr = new Array ( 5 ), 时间对象: var date = new Date()

函数前面带上new关键字,是构造函数的外在表现

 1         function CreateObj( uName ){
 2             this.userName= uName;
 3             this.showUserName = function(){
 4                 return this.userName;
 5             }
 6         }
 7         var obj1 = new CreateObj( 'ghostwu' );
 8         var obj2 = new CreateObj( '卫庄' );
 9 
10         console.log( obj1.showUserName() ); //ghostwu
11         console.log( obj2.showUserName() ); //卫庄

首先,明确几个事实:

  • 任何函数前面都可以用new关键字

  • 如果用了new关键字, 函数中的this指向的是 创建出来的对象, obj1造出来的时候,this指向的就是obj1,
    obj2造出来的时候,this指向的就是obj2.

  • 构造函数把属性和方法直接赋值给this, 不需要创建一个对象( new Object() )

  • 构造函数会自动return this

  • 每new一个函数, 就会在内存中,生成一个独立的内存区域,用来存储当前的对象,以及对象上面的方法和属性
    图片描述

如果构造函数前面不用new去掉用,函数中的this指向的是window, 相当于给window加属性和方法,函数没有返回值,就是undefined

obj1 = CreateObj( 'ghostwu' );
obj2 = CreateObj( '卫庄' );

console.log( obj1 ); //undefined
console.log( obj2 ); //undefined

那向下面这样调用,就会报错
console.log( obj1.showUserName() ); //报错
console.log( obj2.showUserName() ); //报错

因为obj1和obj2都是undefined,showUserName被加到windows对象上了

相关文章:

  • Python Configparser模块读取、写入配置文件
  • Oracle JET mobile cordove navigator.app对象
  • TFS 报错解决方案:tf400324
  • 欧洲某领先银行利用大数据实现创新转型
  • Nginx多层代理配置
  • 嗜血法医第八季/全集Dexter 8迅雷下载
  • 太一星晨:负载均衡啃不动的骨头交给应用交付
  • Android之通过HttpURLConnection.getResponseCode状态码抛出异常的问题以及解决方法
  • Dropcam摄像头:透过我的眼睛辨出你是谁
  • webservice fail protected mode
  • 第20条:类层次优于标签类
  • css属性的继承、初识值、计算值、当前值、应用值
  • redis以及php的redis扩展安装部署
  • Gartner表示安全分析可能是安全风险检测的关键
  • 掌众金融:业务主体变更掌众金服
  • 【JavaScript】通过闭包创建具有私有属性的实例对象
  • Docker 笔记(1):介绍、镜像、容器及其基本操作
  • echarts的各种常用效果展示
  • HTTP中GET与POST的区别 99%的错误认识
  • js中的正则表达式入门
  • OSS Web直传 (文件图片)
  • Vultr 教程目录
  • 阿里云应用高可用服务公测发布
  • 爱情 北京女病人
  • 大整数乘法-表格法
  • 构建工具 - 收藏集 - 掘金
  • 前端面试题总结
  • 日剧·日综资源集合(建议收藏)
  • 腾讯优测优分享 | 你是否体验过Android手机插入耳机后仍外放的尴尬?
  • 跳前端坑前,先看看这个!!
  • 移动端解决方案学习记录
  • Hibernate主键生成策略及选择
  • #我与Java虚拟机的故事#连载13:有这本书就够了
  • (1)Map集合 (2)异常机制 (3)File类 (4)I/O流
  • (51单片机)第五章-A/D和D/A工作原理-A/D
  • (Java)【深基9.例1】选举学生会
  • (转)甲方乙方——赵民谈找工作
  • .gitignore文件—git忽略文件
  • .NET 中使用 TaskCompletionSource 作为线程同步互斥或异步操作的事件
  • .Net环境下的缓存技术介绍
  • .NET上SQLite的连接
  • .pings勒索病毒的威胁:如何应对.pings勒索病毒的突袭?
  • [Android]一个简单使用Handler做Timer的例子
  • [Assignment] C++1
  • [AutoSAR 存储] 汽车智能座舱的存储需求
  • [datastore@cyberfear.com].Elbie、[thekeyishere@cock.li].Elbie勒索病毒数据怎么处理|数据解密恢复
  • [emuch.net]MatrixComputations(7-12)
  • [HNOI2006]鬼谷子的钱袋
  • [Java][算法 双指针]Day 02---LeetCode 热题 100---04~07
  • [NYOJ 536] 开心的mdd
  • [PTA]数组循环右移
  • [Spring Cloud Task]3 框架配置详解
  • [SWPUCTF 2021 新生赛]ez_unserialize
  • [北京] [在线教育项目] [学而思] 求 PHP 攻城狮 3 枚 ╮(╯_╰)╭
  • [翻译] RSKImageCropper