对象化编程-------简单地去理解就是把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浅谈的更多相关文章

  1. Js之浅谈dom操作

    JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...

  2. js原型浅谈理解

    之前在学习原型(prototype)的时候,一直对原型的理解不是很清晰,只是知道每个对象都有一个原型,然后在js中万物又皆对象.在这里谈一下自己对于js原型的简单理解吧. 原型可以实现属性和方法的共享 ...

  3. js变量浅谈

    js变量是除了this以外最让人恶心的东西了,还因为烂语法造成各种各样奇奇怪怪的事情发生,下面让我们来谈谈都有什么奇怪的事: 1.用var与不用var function test(){ a = 123 ...

  4. JS基础——浅谈前端页面渲染和性能优化

    加载html中的静态资源 其中,加载静态资源的过程,一般为浏览器根据DNS服务器得到域名的IP地址,然后向这个IP的机器发送http请求,服务器收到.处理并返回http请求,浏览器得到返回http请求 ...

  5. js中浅谈this对象(未补充完整)

    什么是this? 1.javascript语言中,一切皆为对象(除了 undefined 和 null 之外),运行环境也是对象,所以函数都是在某个对象之中运行,this就是这个对象(环境). 2.t ...

  6. 浅谈Vue.js

    作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...

  7. 浅谈JS之AJAX

    0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...

  8. 浅谈JS中的闭包

    浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...

  9. 浅谈 js 正则字面量 与 new RegExp 执行效率

    原文:浅谈 js 正则字面量 与 new RegExp 执行效率 前几天谈了正则匹配 js 字符串的问题:<js 正则学习小记之匹配字符串> 和 <js 正则学习小记之匹配字符串优化 ...

  10. 浅谈 js 字符串之神奇的转义

    原文:浅谈 js 字符串之神奇的转义 字符串在js里是非常常用的,但是你真的了解它么?翻阅<MDN String>就可以了解它的常见用法了,开门见山的就让你了解了字符串是怎么回事. 'st ...

随机推荐

  1. ASP.NET MVC5 网站开发实践 - 概述

    前段时间一直在用MVC4写个网站开发的demo,由于刚开始学所有的代码都写在一个项目中,越写越混乱,到后来有些代码自己都理不清了.1月26日晚上在群里跟@怒放 他们讨论这个问题,结论是即使只是一个小d ...

  2. Delete Volume 操作 - 每天5分钟玩转 OpenStack(57)

    今天讨论 cinder 如何删除 volume . 状态为 Available 的 volume 才能够被 delete.如果 volume 当前已经 attach 到 instance,需要先 de ...

  3. ViewPager+RadioGroup实现标题栏切换,Fragment切换

    1.说明: 在使用RadioGroup做标题栏切换的时候,跟ViewPager的滑动有冲突,最后查看了源码+断点调试解决了一些碰到的问题,写一篇博客总结一下,有同样需求的朋友可以借鉴一下,自己以后有用 ...

  4. MySQL学习笔记七:存储引擎

    1.MySQL存储引擎的设计采用“插件式”方案,用户可以很方便地选择使用哪种存储引擎,想使用mysql没有提供的引擎时,可以自己安装进去. 查看支持的存储引擎 mysql> show engin ...

  5. Target-Action回调模式

    前面的博客中提到过回调的概念,是在OC通过协议来实现的回调,和Java中的接口的回调极为相似,下面来介绍另一种方法回调模式: Target-Action回调.首先我们来从字面意思来理解一下Target ...

  6. vc下打印透明背景图片

    一.前言 刚接到个任务,要把带有透明背景的章子图片打印出来,开始觉得不是很简单吗,直接用vc自动生成的打印功能不就ok了.不过问题却不是想像的那么简单! 二.窗口中显示透明图片 在窗口中显示图片,可以 ...

  7. CDH安装失败了,如何重新安装

    1> 删除Agent节点的UUID # rm -rf /opt/cm-5.4.7/lib/cloudera-scm-agent/* 2>  清空主节点CM数据库 进入主节点的Mysql数据 ...

  8. IO通道

    本文原创,转载需标明原处. 通道,主要负责传输数据,相当于流,但流只能是输入或输出类型中的其一,而通道则可以兼并二者. 通道的基类是:Channel boolean isOpen() void clo ...

  9. c/c++系列的运算符优先级总结

    经常写程序的时候,遇到运算符优先级的问题,令我汗颜的是,查书的次数挺多的……狠狠心,总结下.不过还要结合大量的编程实践来深入脑海. 1.首先永远忘不了的是,逗号运算符级别最低,毫无争议的还有()括起来 ...

  10. WebGIS中基于AGS的画圆查询简析以及通过Polygon来构造圆的算法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 某个项目需求中需要在前端进行画圆查询,将圆范围上的多边形要素 ...