对象化编程-------简单地去理解就是把javascript能涉及到的范围分成各种对象,对象下面再次划分对象。编程出发点多是对象,或者说基于对象。所说的对象既包含变量,网页,窗口等等 对象的含义 对象可以是文字,表单等等。对象包含一下属性-------对象的某些特定的性质方法-------对象能做的事情事件-------能响应发生在对象上的事情 注意:对象只是一种特殊的数据
2. 基本对象 我们一般划分的角度还是从数据类型这方面NumberStringArrayMathData 这边我只是简单地罗列出来部分,具体的可以参考
不过我这边还是想讲一下比较流行的一道前端面试题,也是我当初来百度面试的时候问我的(题目的来源好像是方荣大侠的某个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代码 不好的地方就是:初级程度代码不是很让人理解