想写这个好久了,自己当时理解这个确实费了一番功夫,现在记录一下,哪怕对读者有一点点帮助,我也很开心,看着不爽大胆喷吧,我脸皮可厚了,闲话不说了,进入正题

--------------------------------------------------我是分割线---------------------------------------------------------

JavaScript是一门基于对象的语言,但它又不是传统意义上的面向对象程序编程语言,它不像java语言有类(class)的概念(es6不算,否则就打脸了),

首先什么是对象?简单说什么都是对象,对象具有封装和继承,以及对象与对象之间使用消息通讯,各自之间消息隐藏

对象的特性为封装、继承和多态;

本节我们就说说封装:

  举个例子:

var dog1={};
dog1.name="道哥";
dog1.six="公";
alert(dog1.name) //输出道哥
var dog2={};
dog2.name="二哈";
   dog2.six="公";
alert(dog2.name) //输出二哈

这就是一个简单的面向对象的封装,不过这中方式很low(不然怎么能说后面的方法高明呢),当对象很多,这样建立对象不仅费时费力而且会浪费大量内存,不可取,所以我改进了一下,引入函数

function Dog(name,s){
this.name=name;
this.sex=s;
this.type="犬科";
this.speck=function(){
alert("汪汪。。。")
}
}
var dog1=new Dog("道哥","公");
var dog2=new Dog("二哈","公");
alert(dog1.name): //输出道哥
alert(dog2.name): //输出二哈
alert(dog1.type); //输出犬科
alert(dog2.type); //输出犬科

这样就高明了不少,当然也有不足,就像你在一家狗舍,里面有很多狗,然后你问这狗叫啥,饲养员说是“道哥”,然后你问它是什么类型,饲养员说是“犬科”,狗很多,你这样问估计饲养员早就烦了,那假如我们在狗舍的墙上写一张告示,上面写明所有狗的共同特性,比如类型,叫声等等嗯,那些共同属性有人问往墙上一指就看到了;

放在代码里就是每建立一个对象就需要重新建立那些共有的属性,这样会浪费大量的内存,很不明智,那么代码中有没有像上面的那么一块“告示牌”呢?答案是当然有。这里我们就需要引入一个新的名词:“prototype”,这是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象,我们可以将我们要定义的方法添加给prototype属性,即

function Dog(name,s){
this.name=name;
this.sex=s;
}
Dog.prototype.type="犬科";
Dog.prototype.spack=function(){
  alert("汪汪。。。")
};

var dog1=new Dog("道哥","公");
  var dog2=new Dog("二哈","公");

此刻我们可以输出

alert(dog1.name)    //输出道哥
alert(dog1.type) //输出犬科
dog1.spack(); //弹出汪汪。。。
alert(dog2.name)    //输出二哈
alert(dog2.type) //输出犬科
dog2.spack(); //弹出汪汪。。。

  因为prototype是一个指针,所以此刻所有的实例(name和spack()),其实都是同一内存地址,指向了prototype对象

下面列一些检测protopypt的方法:

        //isPrototypeOf是检测protopype对象和实例之间的关系,如下面输出,dog1继承于Dog,故输出为true,而cat1继承于Cat,与Dog没啥关系,所以输出为false
alert(Dog.prototype.isPrototypeOf(dog1)); //true
alert(Dog.prototype.isPrototypeOf(cat1)); //false //hasOwnProperty属性判断该属性是自己的属性还是继承于prototype的属性,name是dog1自己的属性,所以输出为1,而type是继承于prototype的属性,所以输出为false
alert(dog1.hasOwnProperty("name")); //true
alert(dog1.hasOwnProperty("type")); //false //in是检测该属性是否是对象的属性,不管是自己的属性还是继承于prototype的属性,例如下面的name和spack是cat1的属性,所以输出为true,而cat1并没有“wife”的属性,所以输出为false;当然in也可以遍历对象的所有属性;
alert("name" in cat1);
alert("spack" in cat1);
alert("wife" in cat1); //in遍历属性
for(var i in dog1){
alert("dog1---"+i) //这样就能输出所有的属性了
}

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

本文借鉴阮大师文章,地址如下:

http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

js面向对象(一)——封装的更多相关文章

  1. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  2. JS面向对象(封装,继承)

    在六月份找工作中,被问的最多的问题就是: js面向对象,继承,封装,原型链这些,你了解多少? 额,,,我怎么回答呢, 只能说,了解一些,不多不少,哈哈哈哈,当然,这是玩笑话. 不过之前学过java,来 ...

  3. 用js面向对象思想封装插件

    js是基于原型的面向对象语言,如果你学过java,c#等正统面向对象语言,你会难以理解js的面向对象,他和普通的面向对象不太一样,今天,我们通过封装一个toast插件,来看看js面向对象是如何运行的. ...

  4. Js 面向对象之封装,继承,原型,原型链

    封装 ,继承 ,原型, 原型链 封装 ? 面向对象有三大特性,封装.继承和多态.对于ES5来说,没有class(类)的概念,并且由于JS的函数级作用域(函数内部的变量在函数外访问不到),所以我们就可以 ...

  5. 实例了解js面向对象的封装和继承等特点

    1.面向对象特点 相比之前按照过程式写法,面向对象有以下几个特点; 1.抽象:抓住核心问题,就是将很多个方法放在一个对象上.对象由属性和方法组成,属性就是我们定义的变量,它是静态的:方法就是行为操作, ...

  6. 个人对js面向对象和封装插件的用法

    做了一段时间的前端了,给自己写代码也总结出来了一点小小的思路,就来分享一下自己的意见和建议了. 面向对象和插件封装其实说到底都是面向对象的思想,但是插件一般是你要用的时候就new 调用出来的.就说一下 ...

  7. js面向对象的封装方法,【案例】

    封装方法: /** * @矩形canvas库 * @authors Shimily (275766400@qq.com) * @date 2016-12-28 10:30:51 * @version ...

  8. 拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

    接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到 ...

  9. canvas+js+面向对象的圆形封装

    效果: Circle.js /* 1. 封装属性: x, y r, fillStyle strokeStyle opacity 2.render */ function Circle(option) ...

  10. canvas+js+面向对象的矩形封装

    效果: Rect.js /* 1. 封装属性: x, y w , h, fillStyle strokeStyle rotation opacity 2.render */ function Rect ...

随机推荐

  1. 大前端涉猎之前后端交互总结2:使用PHP进行表单数据上传与更新

    1:使用PHP进行表单上传 1.1 form表单的数据收集 HTML页面: 代码解释:核心模块是form的属性: --提交方式 :  method="post" --指定 name ...

  2. Unity热更新技术整理

    一.热更新学习介绍 1.什么是热更新 举例来说: 游戏上线后,玩家下载第一个版本(70M左右或者更大),在运营的过程中,如果需要更换UI显示,或者修改游戏的逻辑,这个时候,如果不使用热更新,就需要重新 ...

  3. 编写高质量代码改善C#程序的157个建议——建议110:用类来代替enum

    建议110:用类来代替enum 枚举(enum)用来表示一组固定的值.例如,为了表示星期信息,我们可以定义枚举Week: enum Week { Monday, Tuesday, Wednesday, ...

  4. 【Android开发精要笔记】Android的Intent机制

    Android的Intent机制 Intent对象的作用和构成 android意图机制最核心的设计思想,就是引入了组件管理服务作为连接组件的管理者. 该服务的作用: 通过组件的配置信息了解系统中每个组 ...

  5. c_c++基础问题(平时读书时笔记)

    1 IP私有地址: 10.0.0.0 -- 10.255.255.255 172.16.0.0 -- 172.31.255.255 192.168.0.0 -- 192.168.255.255 2OS ...

  6. static 静态类

    C# 编译器对静态类进行了如下限制. 1. 静态类必须直接从System.Object派生,从其他任何基类生都没有意义,继承只适用于对象,而你不能创建静态类的实例. 2. 静态类不能实现任何接口,这是 ...

  7. Android-Observer(内容观察者)

    内容提供者应用暴露的数据,是被多个其他应用访问(insert,update,delete,query),但如果L应用要查询(内容提供者应用暴露的数据),难道要开启子线程一直循环去查询 ? 答:开启子线 ...

  8. mybatis 起别名

    mybatis.xml文件 typeAliases 节点进行配置别名(有两种配置方法:1.typeAlias   2.package 这个方式比较简单) 也可以省略不写

  9. IIS 7.5 使用appliaction Initialization

    https://blogs.msdn.microsoft.com/amol/2013/01/25/application-initialization-ui-for-iis-7-5/ 待续 正在测试 ...

  10. base64编码问题

    最近遇到一个很奇怪的问题:post方式上传文件,因为文件不大,所以直接base64后作为参数扔给服务器.一开始好用,后来出问题了,上传的压缩包再下载后,能双击打开看到压缩包里面的文件,但是解压就报错, ...