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 ...
随机推荐
- 手把手教你用nodejs+SQL Server2012做增删改查
1.开发工具WebStorm 10.0.4 2.打开WebStorm 10.0.4新建项目:
- 【原创】.NET平台机器学习组件-Infer.NET连载(二)贝叶斯分类器
本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html 微软Infer.NET机器学习组件文章目录:http:/ ...
- Attach Volume 操作(Part I) - 每天5分钟玩转 OpenStack(53)
上一节我们创建了 volume,本节讨论如何将 volume attach 到 Instance,今天是第一部分. Volume 的最主要用途是作为虚拟硬盘提供给 instance 使用.Volume ...
- 使用Genymotion调试出现错误INSTALL_FAILED_CPU_ABI_INCOMPATIBLE解决办法
需要下载Genymotion-ARM-Translation_v1.1.zip ARM插件包 用于安装ARM架构的程序,将下载好的zip包用鼠标拖到虚拟机窗口中,出现确认对跨框点OK就行.然后重启你 ...
- 结婚虽易,终老不易:EntityFramework和AutoMapper的婚后生活
写在前面 我到底是什么? 越界的可怕 做好自己 后记 上一篇<恋爱虽易,相处不易:当EntityFramework爱上AutoMapper>文章的最后提到,虽然AutoMapper为了En ...
- (二十一)WebGIS中鹰眼的实现思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 鹰眼功能是WebGIS中的一种常见功能,利用一些开源的框架实现 ...
- 【知识积累】SBT+Scala+MySQL的Demo
一.背景 由于项目需要,需要在Sbt+Scala项目中连接MySQL数据库.由于之前使用Maven+Java进行依赖管理偏多,在Sbt+Scala方面也在不断进行摸索,特此记录,作为小模块知识的积累. ...
- mybatis入门基础(九)----逆向工程
一.什么是逆向工程 mybaits需要程序员自己编写sql语句,mybatis官方提供逆向工程 可以针对单表自动生成mybatis执行所需要的代码(mapper.java,mapper.xml.po. ...
- Java动态编程初探——Javassist
最近需要通过配置生成代码,减少重复编码和维护成本.用到了一些动态的特性,和大家分享下心得. 我们常用到的动态特性主要是反射,在运行时查找对象属性.方法,修改作用域,通过方法名称调用方法等.在线的应用不 ...
- [译] Paxos算法详解
1. 概述 Paxos算法被用来实现一个容错的分布式系统,一直以来以晦涩难懂著称.这可能是因为该算法最开始使用希腊文表述的.事实上,它是所有分布式算法中最简单易懂的.Paxos算法的本质其实就是一个共 ...