js---OOP浅谈
对象化编程-------简单地去理解就是把javascript能涉及到的范围分成各种对象,对象下面再次划分对象。编程出发点多是对象,或者说基于对象。所说的对象既包含变量,网页,窗口等等
对象的含义
对象可以是文字,表单等等。对象包含一下
属性-------对象的某些特定的性质
方法-------对象能做的事情
事件-------能响应发生在对象上的事情
注意:对象只是一种特殊的数据
2. 基本对象
我们一般划分的角度还是从数据类型这方面
Number
String
Array
Math
Data
这边我只是简单地罗列出来部分,具体的可以参考http://www.w3school.com.cn/js/js_obj_intro.asp
不过我这边还是想讲一下比较流行的一道前端面试题,也是我当初来百度面试的时候问我的(题目的来源好像是方荣大侠的某个web前端研发工程师编程能力成长之路的文档里面的)
废话少说
出题:
“输出字符串--今天是星期几”
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.
下面介绍创建类和对象的模式
简单方式
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
不好的地方就是:在创建多个对象的场景下会产生 很多冗余的代码,耦合度不高
工厂模式下
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)下
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代码
不好的地方就是:初始化参数不支持传递,还有就是原型的所有属性和方法会被所有的实例共享
混合模式(原型+构造函数)下
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代码
不好的地方就是:对象的属性和方法也多是公用的
闭包下的私有变量模式
(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代码
不好的地方就是:初级程度代码不是很让人理解
转载自: 作者“zhangyaochun”
js---OOP浅谈的更多相关文章
- Js之浅谈dom操作
JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...
- js原型浅谈理解
之前在学习原型(prototype)的时候,一直对原型的理解不是很清晰,只是知道每个对象都有一个原型,然后在js中万物又皆对象.在这里谈一下自己对于js原型的简单理解吧. 原型可以实现属性和方法的共享 ...
- js变量浅谈
js变量是除了this以外最让人恶心的东西了,还因为烂语法造成各种各样奇奇怪怪的事情发生,下面让我们来谈谈都有什么奇怪的事: 1.用var与不用var function test(){ a = 123 ...
- JS基础——浅谈前端页面渲染和性能优化
加载html中的静态资源 其中,加载静态资源的过程,一般为浏览器根据DNS服务器得到域名的IP地址,然后向这个IP的机器发送http请求,服务器收到.处理并返回http请求,浏览器得到返回http请求 ...
- js中浅谈this对象(未补充完整)
什么是this? 1.javascript语言中,一切皆为对象(除了 undefined 和 null 之外),运行环境也是对象,所以函数都是在某个对象之中运行,this就是这个对象(环境). 2.t ...
- 浅谈Vue.js
作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...
- 浅谈JS之AJAX
0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...
- 浅谈JS中的闭包
浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...
- 浅谈 js 正则字面量 与 new RegExp 执行效率
原文:浅谈 js 正则字面量 与 new RegExp 执行效率 前几天谈了正则匹配 js 字符串的问题:<js 正则学习小记之匹配字符串> 和 <js 正则学习小记之匹配字符串优化 ...
- 浅谈 js 字符串之神奇的转义
原文:浅谈 js 字符串之神奇的转义 字符串在js里是非常常用的,但是你真的了解它么?翻阅<MDN String>就可以了解它的常见用法了,开门见山的就让你了解了字符串是怎么回事. 'st ...
随机推荐
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- MVC4做网站后台:用户管理 —用户
这块进行用户管理,可以浏览.查询已注册的用户,修改用户资料,删除用户等.没有做添加用户,不知是否必要.列表页还是使用easyui的datagrid.这个思路跟用户组的方式差不多. 1.接口Interf ...
- Front End Developer Questions 前端开发人员问题(二)CSS 后续
问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 31.视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再 ...
- 简析将shp导入Oracle并利用geoserver将导入的数据发布
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.环境准备 1.1 软件准备 首先要安装有支持空间数据的Oracle ...
- Linux服务器(Ubuntu14.04)添加远程连接VNC Server
1.打开终端输入:sudo apt-get install xrdp, 2. sudo apt-get install vnc4server , 3. sudo apt-get install ...
- Linux上的SQL Server——预告片
大家可能都听说了,微软在几个星期前宣布发布可以在Linux上完整运行的SQL Server!如果你想看下在Linux上SQL Server如何运行,进行查询是什么样的体验,可以看下下面的视频.
- Net设计模式实例之建造者模式(Builder Pattern)
一.建造者模式简介(Brief Introduction) 建造者模式(Builder Pattern),将一个复杂对象的构建与它的表示分离,使的同样的构建过程可以创建不同的表示. 建造者模式的优点是 ...
- C# decimal保留指定的小数位数,不四舍五入
decimal保留指定位数小数的时候,.NET自带的方法都是四舍五入的. 项目中遇到分摊金额的情况,最后一条的金额=总金额-已经分摊金额的和. 这样可能导致最后一条分摊的时候是负数,所以自己写了一个保 ...
- linq lambda left join
//var list = table1.Join(table2, ee => ee.Id, ff => ff.table1_Id, (ee, ff) => new { ee, ff ...
- Java中, 函数的调用、随机数字
函数: 独立完成某个功能的代码模块.(方法) 作用是为了让代码结构更加良好.模块清晰,实现重用. 函数的四要素:名称,输入值,加工过程,返回值 Java中函数的语法 static 返回类型 函 ...