码迷,mamicode.com
首页 > Web开发 > 详细

js---OOP浅谈

时间:2015-08-11 19:33:19      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:

js---OOP浅谈

对象化编程-------简单地去理解就是把javascript能涉及到的范围分成各种对象,对象下面再次划分对象。编程出发点多是对象,或者说基于对象。所说的对象既包含变量,网页,窗口等等
 
对象的含义
          对象可以是文字,表单等等。对象包含一下
属性-------对象的某些特定的性质
方法-------对象能做的事情
事件-------能响应发生在对象上的事情
     注意:对象只是一种特殊的数据

     2.  基本对象
        
         我们一般划分的角度还是从数据类型这方面
Number
String
Array
Math
Data  
这边我只是简单地罗列出来部分,具体的可以参考
http://www.w3school.com.cn/js/js_obj_intro.asp
 
不过我这边还是想讲一下比较流行的一道前端面试题,也是我当初来百度面试的时候问我的(题目的来源好像是方荣大侠的某个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代码 
不好的地方就是:初级程度代码不是很让人理解


js---OOP浅谈

标签:

原文地址:http://my.oschina.net/u/2421889/blog/490818

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!