1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > [js高手之路]搞清楚面向对象 必须要理解对象在创建过程中的内存表示

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

时间:2020-03-20 09:08:43

相关推荐

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

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

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

varobj=newObject();obj.userName='ghostwu';obj.showUserName=function(){returnobj.userName;};varobj2=newObject();obj2.userName='卫庄';obj2.showUserName=function(){returnobj2.userName;};console.log(obj.showUserName());//ghostwuconsole.log(obj2.showUserName());//卫庄

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

functioncreateObj(uName){varobj=newObject();obj.userName=uName;obj.showUserName=function(){returnobj.userName;}returnobj;}varobj1=createObj('ghostwu');varobj2=createObj('卫庄');console.log(obj1.showUserName());//ghostwuconsole.log(obj2.showUserName());//卫庄

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

什么是构造函数方式?

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

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

functionCreateObj(uName){this.userName=uName;this.showUserName=function(){returnthis.userName;}}varobj1=newCreateObj('ghostwu');varobj2=newCreateObj('卫庄');console.log(obj1.showUserName());//ghostwuconsole.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对象上了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。