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

binta 发布于2019-08-20 18:56 / 2307人阅读

摘要：面向对象编程方式，对于初学者来说，会比较难懂要学会面向对象以及使用面向对象编程，理解对象的创建在内存中的表示，至关重要首先，我们来一段简单的对象创建代码卫庄卫庄上例，我们创建了两个对象和如果有多个类似对象，我们可以通过函数封装，这种函数封装

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对象上了

私有云服务器托管 js 面向对象视频 js面向对象开发表格 oop面向对象 js js对象存储过程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84917.html

[js高手之路]构造函数的基本特性与优缺点

摘要：所以一句话理解的运算规则为检测左侧的原型链上，是否存在右侧的原型。上文,通过基本的对象创建问题了解了构造函数，本文，我们接着上文继续了解构造函数的基本特性，以及优缺点. 每个对象上面都有一个constructor属性( 严格意义上来说，是原型上的，对象是通过查找到原型找到 constructor属性 ).后面讲到原型的时候，我会用示意图的方式说明 1 functio...

Ajian 2019-08-20 18:57 评论0 收藏0
JavaScript 函数式编程导论

摘要：函数式编程导论从属于笔者的前端入门与工程实践。函数式编程即是在软件开发的工程中避免使用共享状态可变状态以及副作用。 JavaScript 函数式编程导论从属于笔者的Web 前端入门与工程实践。本文很多地方是讲解函数式编程的优势，就笔者个人而言是认可函数式编程具有一定的好处，但是不推崇彻底的函数式编程化，特别是对于复杂应用逻辑的开发。笔者在应用的状态管理工具中就更倾向于使用MobX而不是...

forrest23 2019-08-20 13:38 评论0 收藏0
程序员入门学习指南

摘要：程序员的入门规划我该学习什么语言这个问题困扰了几乎所有的程序员，比如应用广好就业，比如入门简单，和安卓待遇高，和开发效率高，是万能语言，和前端缺人才等等个人见解先学习难度小，大众化的编程语言，比如，，，这几个学哪一种其实差不多，入门以后看自程序员的入门规划 1.我该学习什么语言？这个问题困扰了几乎所有的程序员，比如java应用广好就业，比如php入门简单，ios和安卓待遇高，rub...

Kahn 2019-08-19 17:24 评论0 收藏0
程序员入门学习指南

摘要：程序员的入门规划我该学习什么语言这个问题困扰了几乎所有的程序员，比如应用广好就业，比如入门简单，和安卓待遇高，和开发效率高，是万能语言，和前端缺人才等等个人见解先学习难度小，大众化的编程语言，比如，，，这几个学哪一种其实差不多，入门以后看自程序员的入门规划 1.我该学习什么语言？这个问题困扰了几乎所有的程序员，比如java应用广好就业，比如php入门简单，ios和安卓待遇高，rub...

princekin 2019-08-14 15:10 评论0 收藏1
JS程序

摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数学习总结。知识只有分享才有存在的意义。是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 评论0 收藏0