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

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

         var obj = new Object();
obj.userName = 'ghostwu';
obj.showUserName = function(){
return obj.userName;
};
var obj2 = new Object();
obj2.userName = '卫庄';
obj2.showUserName = function(){
return obj2.userName;
}; console.log( obj.showUserName() ); //ghostwu
console.log( obj2.showUserName() ); //卫庄

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

         function createObj( uName ){
var obj = new Object();
obj.userName = uName;
obj.showUserName = function(){
return obj.userName;
}
return obj;
}
var obj1 = createObj( 'ghostwu' );
var obj2 = createObj( '卫庄' );
console.log( obj1.showUserName() ); //ghostwu
console.log( obj2.showUserName() ); //卫庄

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

什么是构造函数方式?

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

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

         function CreateObj( uName ){
this.userName= uName;
this.showUserName = function(){
return this.userName;
}
}
var obj1 = new CreateObj( 'ghostwu' );
var obj2 = new CreateObj( '卫庄' ); console.log( obj1.showUserName() ); //ghostwu
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对象上了
 

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

  1. [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

    上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置 一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意 ...

  2. [js高手之路] javascript面向对象写法与应用

    一.什么是对象? 对象是n个属性和方法组成的集合,如js内置的document, Date, Regexp, Math等等 document就是有很多的属性和方法, 如:getElementById, ...

  3. [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

    接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...

  4. [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

    上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...

  5. [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

    还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...

  6. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

  7. [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法

    什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loade ...

  8. [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

    我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在we ...

  9. [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法

    我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease ...

随机推荐

  1. webgl自学笔记——光照

    在Webgl中我们使用顶点着色器和片元着色器来为我们的场景创建光照模型.着色器允许我们使用数学模型来控制如何照亮我们的场景. 最好有线性代数的相关知识. 本章中: 光源.法线.材料 光照和着色的区别 ...

  2. spring框架的IOC的底层原理

    1.IOC概念:spring容器创建对象并管理 2.IOC的底层原理的具体实现: 1)所使用的技术: (1). dom4j解析xml配置文件 (2).工厂设计模式(解耦合) (3).反射 第一步:配置 ...

  3. Go语言学习笔记(四)结构体struct & 接口Interface & 反射

    加 Golang学习 QQ群共同学习进步成家立业工作 ^-^ 群号:96933959 结构体struct struct 用来自定义复杂数据结构,可以包含多个字段(属性),可以嵌套: go中的struc ...

  4. HDU 6047 Maximum Sequence(线段树)

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=6047 题目: Maximum Sequence Time Limit: 4000/2000 MS (J ...

  5. java 线程之concurrent中的常用工具 CyclicBarrier

    一.CyclicBarrier CyclicBarrier是一个同步辅助类,它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).在涉及一组固定大小的线程的程序 ...

  6. Spring mybatis源码篇章-MybatisDAO文件解析(一)

    前言:通过阅读源码对实现机制进行了解有利于陶冶情操,承接前文Spring mybatis源码篇章-SqlSessionFactory 加载指定的mybatis主文件 Mybatis模板文件,其中的属性 ...

  7. dubbo&hsf&spring-cloud简单介绍

    Dubbo: 简介:Dubbo是一个分布式服务框架,以及SOA治理方案.其功能主要包括:高性能NIO通讯及多协议集成,服务动态寻址与路由,软负载均衡与容错,依赖分析与降级等. 底部NIO基于netty ...

  8. [学习笔记] Splay Tree 从入门到放弃

    前几天由于出行计划没有更博QwQ (其实是因为调试死活调不出来了TAT我好菜啊) 伸展树 伸展树(英语:Splay Tree)是一种二叉查找树,它能在O(log n)内完成插入.查找和删除操作.它是由 ...

  9. 初学Python(七)——控制语句

    初学Python(七)——控制语句 初学Python,主要整理一些学习到的知识点,这次是控制语句. if : #-*- coding:utf-8 -*- age=raw_input('input yo ...

  10. Jenkins发布MVC应用程序

    一个大的项目一般都会进行模块化.层次化分隔,每个模块.每个层次都可能是一个或多个工程文件组成,而且各个模块都有依赖关系,有先后顺序,先build哪个然后再build哪个都是有顺序的,如果想build一 ...