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 ...
随机推荐
- 用pageGroup.js实现分页功能
1.html页面中 引入 <link rel="stylesheet" type="text/css" href="/stylesheets/p ...
- poj 3630 Phone List
#include<iostream> #include<cstdio> #include<cstring> #define N 100005 using names ...
- The network bridge on device VMnet0 is not running
The network bridge on device VMnet0 is not running. The virtual machine will not be able to communic ...
- 借助node实战JSONP跨域
一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...
- 好玩的SQL
1. 做一个3*3的加法表 SQL), (); A||'+'||B||'='||(A+B) ------------------------------------------------------ ...
- 1Z0-053 争议题目解析692
1Z0-053 争议题目解析692 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 692.Your company wants to upgrade the production ...
- 用大白话聊聊JavaSE -- 自定义注解入门
注解在JavaSE中算是比较高级的一种用法了,为什么要学习注解,我想大概有以下几个原因: 1. 可以更深层次地学习Java,理解Java的思想. 2. 有了注解的基础,能够方便阅读各种框架的源码,比如 ...
- SQL Server 2014里的性能提升
在这篇文章里我想小结下SQL Server 2014引入各种惊艳性能提升!! 缓存池扩展(Buffer Pool Extensions) 缓存池扩展的想法非常简单:把页文件存储在非常快的存储上,例如S ...
- 浅解析js中的对象
浅解析js中的对象 原文网址:http://www.cnblogs.com/foodoir/p/5971686.html,转载请注明出处. 前面的话: 说到对象,我首先想到的是每到过年过节见长辈的时候 ...
- linux下命令行操作快捷键及技巧
历史相关命令 !!:执行上一条命令 !num:执行历史命令中第num条命令 !-num:执行历史命令中倒数第num条命令 !?string?:执行最近一条包含有string字符串的命令 Ctrl+ ...