博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js---OOP浅谈
阅读量:6631 次
发布时间:2019-06-25

本文共 3504 字,大约阅读时间需要 11 分钟。

hot3.png

对象化编程-------简单地去理解就是把javascript能涉及到的范围分成各种对象,对象下面再次划分对象。编程出发点多是对象,或者说基于对象。所说的对象既包含变量,网页,窗口等等

 
对象的含义
          对象可以是文字,表单等等。对象包含一下
属性-------对象的某些特定的性质
方法-------对象能做的事情
事件-------能响应发生在对象上的事情
     注意:对象只是一种特殊的数据

     2.  基本对象

        
         我们一般划分的角度还是从数据类型这方面
Number
String
Array
Math
Data  
这边我只是简单地罗列出来部分,具体的可以参考
 
不过我这边还是想讲一下比较流行的一道前端面试题,也是我当初来百度面试的时候问我的(题目的来源好像是方荣大侠的某个web前端研发工程师编程能力成长之路的文档里面的)
废话少说

出题:

                       “输出字符串--今天是星期几”
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
var
_str =
""
;
var
_today =
new
Date().getDay();
if
(_today == 0){
   
_str =
"今天是星期日"
}
else
if
(_today  == 1){
  
_str =
"今天是星期一"
}
else
if
(_today  == 2){
  
_str =
"今天是星期二"
}
else
if
(_today  == 3){
  
_str =
"今天是星期三"
}
else
if
(_today  == 4){
  
_str =
"今天是星期四"
}
else
if
(_today  == 5){
  
_str =
"今天是星期五"
}
else
if
(_today  == 6){
  
_str =
"今天是星期六"
}
 
 
 
 
var
_str =
"今天是星期"
;
 
var
_today=
new
Date().getDay();
switch
(_today){
      
case
0:
           
_str +=
"日"
           
break
;
      
case
1:
           
_str +=
"一"
           
break
;
      
case
2:
           
_str +=
"二"
           
break
;
      
case
3:
           
_str +=
"三"
           
break
;
      
case
4:
           
_str +=
"四"
           
break
;
      
case
5:
           
_str +=
"五"
           
break
;
      
case
6:
           
_str +=
"六"
           
break
;
 
 
}
 
 
var
_str =
"今天是星期"
+
"日一二三四五六"
.charAt(
new
Date().getDay());

  

 3.
下面介绍创建类和对象的模式
简单方式
        

1
2
3
4
5
6
7
8
9
var
people ={};
Js代码
      
people.name =
"steven"
;
      
people.age = 23;
      
people.getName =
function
(){
           
return
"People's name is "
+
this
.name;
     
};
console.log(people.getName());         
//People's name is steven
console.log(people.age);                   
//23

  

不好的地方就是:在创建多个对象的场景下会产生 很多冗余的代码,耦合度不高 
 

工厂模式下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function
makePeople(name,age,job){
     
var
_obj = {};
     
_obj.name = name;
     
_obj.age =age;
     
_obj.job = job;
    
_obj.getName =
function
(){
        
return
"People's name is "
+
this
.name;
   
    
return
_obj;
}
 
 
var
webdesigner = makePeople(
"steven"
,23,
"wendesigner"
);
console.log(webdesigner.getName );      
//People's name is steven
console.log(webdesigner.job)               
//wendesigner

  

 

Js代码 

不好的地方就是:实例化比较频繁 

原型模式(prototype)下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function
People(){};
People.prototype = {
       
constructor :People,
       
name:
"steven"
,
       
age:23,
       
job:
"webdesigner"
,
       
getName:
function
(){
             
return
"People's name is "
+
this
.name;
      
}
}
 
 
var
webdesign =
new
People();
var
carman =
new
People();
console.log(webdesign.getName());   
//People's name is steven
console.log(carman.getName());   
//People's name is steven

  

 
Js代码 
不好的地方就是:初始化参数不支持传递,还有就是原型的所有属性和方法会被所有的实例共享 

混合模式(原型+构造函数)下

 
 
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function
People(name.age.job){
Js代码
this
.name = name;
Js代码
       
this
.age = age;
       
this
.job = job;
};
People.prototype = {
      
constructor:People,
      
getName:
function
(){
           
return
"People's name is "
+
this
.name;
      
}
}
 
 
var
webdesigner  =
new
People(
"steven"
,23,
"webdesigner"
);
var
carman =
new
People(
"zyc"
,24,
"carman"
);
console.log(webdesigner.getName())  
//People's name is steven
console.log(carman.getName())  
//People's name is zyc

  

 
Js代码 
不好的地方就是:对象的属性和方法也多是公用的 
 
 
闭包下的私有变量模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
(
function
(){
    
var
name =
""
;
    
People =
function
(val){
        
name = val;
   
};
    
People.prototype ={
       
constructor:People,
       
getName:
function
(){
              
return
"People's name is "
+ name ;
      
}
   
};
})();
 
 
 
 
var
webdesigner =
new
People(
"steven"
);
console.log(webdesigner.name);          
//undefined
console.log(webdesigner.getName());     
//People's name is steven
 
 
var
carman=
new
People(
"zyc"
);
console.log(carman.name);          
//undefined
console.log(carman.getName());     
//People's name is zyc

  

Js代码 

不好的地方就是:初级程度代码不是很让人理解

转载于:https://my.oschina.net/u/2421889/blog/490818

你可能感兴趣的文章
WebServices中Xml的序列化
查看>>
[转]测试的三重境界
查看>>
share
查看>>
C#高性能大容量SOCKET并发(转)
查看>>
如何在MyEclipse中将项目部署Tomcat
查看>>
【Stage3D学习笔记续】真正的3D世界(四):空间大战雏形
查看>>
Nginx学习之一-第一个程序Hello World
查看>>
gulp browser-sync自动刷新插件
查看>>
xpress for node 路由route几种实现方式
查看>>
【转】想要成功,请记住!
查看>>
ashx的学习
查看>>
[Linux] Ubuntu下非常给力的下载工具
查看>>
通用超级强大的基于Oracle数据库的代码生成器
查看>>
XP的定时关机命令?
查看>>
Android DDMS 连接真机(己ROOT),用file explore看不到data/data文件夹的解决办法
查看>>
小项目中建立列表页时间需要注意的
查看>>
SQL Server 索引列的顺序——真的没关系吗
查看>>
Eclipse中Svn插件配置
查看>>
POI 设置EXCEL单元格格式(日期数字文本等)
查看>>
cocos2d-x lua 学习笔记(1) -- 环境搭建
查看>>