初识JavaScriptOOP(js面向对象)

Javascript是一种基于对象(object-based)的语言,

你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。

一、 生成实例对象的原始模式

假定我们把花看成一个对象,它有"名字"和"产地"两个属性。

创建一个对象有两种方法:

01.
<script type="text/javascript">
var flower=new Object();
flower .name="牡丹";
flower.area="洛阳";
flower.showName=function () {
alert(flower.name);
}; </script> 02.
var flower={
name:"牡丹",
area:"洛阳花会",
flower:showName=function () {
alert(flower.name);
}
};
//调度函数
flower.showName(); </script> 

二、 原始模式的改进

我们可以写一个函数,解决代码重复的问题。

<script type="text/javascript">
function Flower(name,area){
this.name=name;
this.area=area;
this.showName=function(){
        alter(this.name);
     };
; }
//创建一个flower对象
var f1=new Flower("红牡丹","洛阳白马寺");
f1.showName();
var f2=new Flower("红牡丹","洛阳白马寺");
f2.showName(); </script>

这种方法的问题依然是,f1和f2之间没有内在的联系,不能反映出它们是同一个原型对象的实例。

用一个方法将他们的共同方法提出:

<script type="text/javascript">
function Flower(name,area){
this.name=name;
this.area=area;
this.showName=myName;
}
//全局对象
function myName(){
alter(this.name);
};
//创建一个flower对象
var f1=new Flower("红牡丹","洛阳白马寺");
f1.showName();
var f2=new Flower("红牡丹","洛阳白马寺");
f2.showName();
</script>

但是,这种方法对服务器的负担较重

<script type="text/javascript">
function Flower(){
//空模板
}
Flower.prototype.name="牡丹花";
Flower.prototype.area="洛阳白马寺、龙门石窟"; Flower.prototype.showName=function(){
alert(this.name);
};
var flag=Flower.prototype.constructor==Flower;
alert(flag);
var flower1=new Flower(); flower1.showName();
if(flower._proto_==Flower.prototype){
alert("==========");
}
</script>

还有一种

<script type="text/javascript">
function Humens(){
return this.foot;
}
//关于Humens的一个原型上的方法,获取到foot
Humens.prototype.getFoot=function(){
return this.foot;
};
//写一个子类
function Man(){
this.head=1;
}
Man.prototype=new Humens();
Man.prototype.getHead=function(){
return this.head;
}; var man1=new Man();
alert(man1,foot);
</script>

接下来模拟一下java中的类和对象

<script type="text/javascript">
function Humens(){
this.sport=["basketball","football","pingpong-ball"];
} function Man(){
Humens.call(this);
}
Man.prototype=new Humens();
var man1=new Man();
man1.sport.push("baseball");
alert(man1.sport); var man2=new Man();
alert(man2.sport);
</script>

初识JavaScriptOOP(js面向对象)的更多相关文章

  1. JS面向对象介绍

    JS面向对象介绍 首先面向对象是什么?为什么要使用面向对象. 因为JavaScript对每个创建的对象都会自动设置一个原型(谷歌火狐中是proto),指向它的原型对象prototype,举个例子: f ...

  2. js面向对象学习 - 对象概念及创建对象

    原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...

  3. 带你一分钟理解闭包--js面向对象编程

    上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...

  4. JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  5. JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  6. JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  7. js面向对象的实现(example 二)

    //这个方法和上篇文章(js面向对象的实现(example 一))中的方法类似,但是更为简洁 //通过函数赋值的方式来构造对象 //同样通过闭包的方式来封装对象及内部变量 (function () { ...

  8. 浅谈JS面向对象之创建对象

    hello,everybody,今天要探讨的问题是JS面向对象,其实面向对象呢呢,一般是在大型项目上会采用,不过了解它对我们理解JS语言有很大的意义. 首先什么是面向对象编程(oop),就是用对象的思 ...

  9. js面向对象,有利于复用

    需求:在网页上添加个天气预报. 以前总是在需要执行js的地方,直接写function(){}.在需要同样功能的地方直接copy,或者稍微修改. 然后在网上看看有没有好点的方法,然后就看到js面向对象编 ...

随机推荐

  1. 洛谷P4462 [CQOI2018]异或序列(莫队)

    打广告->[这里](https://www.cnblogs.com/bztMinamoto/p/9538115.html) 我蠢了…… 如果$a_{l} xor ...a_{r}=k$,那么只要 ...

  2. 调停者模式Mediator(中介者模式)详解

    原文链接:https://www.cnblogs.com/java-my-life/archive/2012/06/20/2554024.html 在阎宏博士的<JAVA与模式>一书中开头 ...

  3. LinkedList实现原理

    原文链接:https://www.jianshu.com/p/56c77c517e71 本文对LinkedList的实现讨论都基于JDK8版本 Java中的LinkedList类实现了List接口和D ...

  4. ExtJS 4.2.1学习笔记(二)——主题theme

    1                 UI组件基础 学习ExtJs就是学习组件的使用.ExtJs4对框架进行了重构,其中最重要的就是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext的控件. E ...

  5. kuangbin专题七 HDU1166 敌兵布阵 (线段树或树状数组)

    C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况.由于 ...

  6. Django---队列

    1.队列介绍 任务队列用作跨线程或机器分配工作的机制. 任务队列的输入是称为任务的工作单元. 专用工作进程不断监视任务队列以执行新工作. Celery通过消息进行通信,通常使用经纪人(brokers) ...

  7. tomcat启动优化

    tomcat的最佳实践运行模式 Tomcat Connector三种运行模式(BIO, NIO, APR)的比较和优化. org.apache.coyote.http11.Http11Protocol ...

  8. Luogu5324 BJOI2019删数(线段树)

    考虑无修改怎么做.对于1~n的每个数,若其存在,将最后一个放在其值的位置,剩余在其前面依次排列,答案即为值域1~n上没有数的位置个数.带修改显然记一下偏移量线段树改一改就好了. #include< ...

  9. Linux安全加固--精简启动项

    1.关闭不必要的服务 1.1.centos6.x服务操作命令 1.1.1.常用命令 查看服务开启或关闭状态: [root@localhost ~]# chkconfig --list aegis 0: ...

  10. P2264 情书

    传送门 正常会想到字典树 然鹅数据怎么小直接map也能过 然后就写map暴力匹配了 毫无思维难度,毫无代码难度 注意逗号算单词分隔符,如果有句号就算另一句 同一句的单词重复出现只计算一次贡献 再开个m ...