||

js—面向对象OOP浅谈

作者daliane

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

 

  1. 对象的含义
          对象可以是文字，表单等等。对象包含以下：
  • 属性——-对象的某些特定的性质
  • 方法——-对象能做的事情
  • 事件——-能响应发生在对象上的事情
     注意：对象只是一种特殊的数据
     2.  基本对象
         我们一般划分的角度还是从数据类型这方面
  • Number
  • String
  • Array
  • Math
  • Date

这边我只是简单地罗列出来部分，具体的可以参考http://www.w3school.com.cn/js/js_obj_intro.asp

5wvwmvnl8yry7ta

不过我这边还是想讲一下比较流行的一道前端面试题，也是我当初来百度面试的时候问我的（题目的来源好像是方荣大侠的某个web前端研发工程师编程能力成长之路的文档里面的）

废话少说——出题：

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

 

答案1：

 

Js代码  收藏代码
  1. var _str = “”;
  2. var _today = new Date().getDay();
  3. if(_today == 0){
  4.    _str = “今天是星期日”；
  5. }else if(_today  == 1){
  6.   _str = “今天是星期一”；
  7. }else if(_today  == 2){
  8.   _str = “今天是星期二”；
  9. }else if(_today  == 3){
  10.   _str = “今天是星期三”；
  11. }else if(_today  == 4){
  12.   _str = “今天是星期四”；
  13. }else if(_today  == 5){
  14.   _str = “今天是星期五”；
  15. }else if(_today  == 6){
  16.   _str = “今天是星期六”；
  17. }

答案2：

 

Js代码  收藏代码
  1. var _str =“今天是星期”;
Js代码  收藏代码
  1. var _today=new Date().getDay();
  2. switch(_today){
  3.       case 0:
  4.            _str += “日”；
  5.            break;
  6.       case 1:
  7.            _str += “一”；
  8.            break;
  9.       case 2:
  10.            _str += “二”；
  11.            break;
  12.       case 3:
  13.            _str += “三”；
  14.            break;
  15.       case 4:
  16.            _str += “四”；
  17.            break;
  18.       case 5:
  19.            _str += “五”；
  20.            break;
  21.       case 6:
  22.            _str += “六”；
  23.            break;
  25. }

答案3：

 

Js代码  收藏代码
  1. var _arr = new Array(“日”,“一”,“二”,“三”,“四”,“五”,“六”);
  2. var _today = new Date().getDay();
  3. var _str = “今天是星期”+_arr[_today ];

 

答案4：

 

Js代码  收藏代码
  1. var _str = “今天是星期”+“日一二三四五六”.charAt(new Date().getDay());

3.

下面介绍创建类和对象的模式
  • 简单方式
Js代码  收藏代码
  2. var people ={};
  3.        people.name = “steven”;
  4.       people.age = 23;
  5.       people.getName = function(){
  6.            return “People’s name is “+ this.name;
  7.      };
  8. console.log(people.getName());          //People’s name is steven
  9. console.log(people.age);                    //23
Js代码  收藏代码
  1. 不好的地方就是：在创建多个对象的场景下会产生 很多冗余的代码，耦合度不高
  • 工厂模式下
Js代码 收藏代码
  1. function makePeople(name,age,job){
  2.      var _obj = {};
  3.      _obj.name = name;
  4.      _obj.age =age;
  5.      _obj.job = job;
  6.     _obj.getName = function(){
  7.         return “People’s name is “+ this.name;
  8.    }
  9.     return _obj;
  10. }
  12. var webdesigner = makePeople(“steven”,23,“wendesigner”);
  13. console.log(webdesigner.getName );       //People’s name is steven
  14. console.log(webdesigner.job)                //wendesigner
Js代码 收藏代码
  1. 不好的地方就是：实例化比较频繁
  • 原型模式（prototype）下
Js代码  收藏代码
  1. function People(){};
  2. People.prototype = {
  3.        constructor :People,
  4.        name:“steven”,
  5.        age:23,
  6.        job:“webdesigner”,
  7.        getName:function(){
  8.              return “People’s name is “+this.name;
  9.       }
  10. }
  12. var webdesign = new People();
  13. var carman = new People();
  14. console.log(webdesign.getName());    //People’s name is steven
  15. console.log(carman.getName());    //People’s name is steven
Js代码  收藏代码
  1. 不好的地方就是：初始化参数不支持传递，还有就是原型的所有属性和方法会被所有的实例共享
  • 混合模式（原型+构造函数）下

 

 

 

 

 

 

 

 

 

 

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

 

Js代码  收藏代码
  1. 不好的地方就是:对象的属性和方法也多是公用的

 

 

 

 

 

 

 

 

 

  • 闭包下的私有变量模式
Java代码 收藏代码
  1. (function(){
  2.     var name =“”;
  3.     People = function(val){
  4.         name = val;
  5.    };
  6.     People.prototype ={
  7.        constructor:People,
  8.        getName:function(){
  9.               return “People’s name is “+ name ;
  10.       }
  11.    };
  12. })();
  15. var webdesigner = new People(“steven”);
  16. console.log(webdesigner.name);           //undefined
  17. console.log(webdesigner.getName());      //People’s name is steven
  19. var carman= new People(“zyc”);
  20. console.log(carman.name);           //undefined
  21. console.log(carman.getName());      //People’s name is zyc
Js代码  收藏代码
  1. 不好的地方就是:初级程度代码不是很让人理解

 

 

类似文章