1.简单的封装(定义)

var cat1 = {};
cat1.name = '阿黄';
cat1.sex = '男';
cat1.age = 11;
//cat2也同样具有三个属性
var cat2 = {};
cat2.name = '小黑';
cat2.sex = '女';
cat2.age = '10';

把cat1和cat2看成是一个对象,ta们都具有三个属性。

缺点:一时如果有多个对象,写起来就比较麻烦,二是实例和原型之间没有任何联系;

2.原始模型封装(在1的基础上进行改进)

function Cat(name,sex,age){
return {
name:name,
sex:sex,
age:age
} }
var cat1 = Cat('小黄','男','11');
var cat2 = Cat('小黑','女','10');
alert(cat1.name);

缺点:cat1和cat2没有什么内在联系,不能反应他们是同一原型对象的实例

3.构造函数的封装

function Cat(name,age,sex){
this.name = name;
this.sex = sex;
this.age = age;
}
var cat1 = new Cat('小黄','男','11');
var cat2 = new Cat('小黑','女','10');

表面上是没有什么缺点,但是如以下代码

function Cat(name,age,sex){
this.name = name;
this.sex = sex;
this.age = age;
this.type = '猫科动物';
}
var cat1 = new Cat('小黄','男','11');
var cat2 = new Cat('小黑','女','10');

cat1和cat2都是属于猫科动物,但是在创建对象原型Cat的实例cat1和cat2时都会创建一次type属性;这样就会造成内存的浪费。

4.prototype模式

function Cat(name,sex,age){
this.name = name;
this.sex = sex;
this.age = age;
}
Cat.prototype.type = '猫科动物';
Cat.prototype.say = function (){alert("喵喵");};
var cat1 = new Cat();
alert(cat1.type);

原理:Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。

个人理解是将相同的属性“放在”一个内存之中,当创建cat1和cat2实例时,他们的属性都会指向同一个内存,从而不用重复创建。

prototype验证

1)isPrototypeOf

2)hasOwnProperty

3)in

本文参考

阮一峰的博客

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

  1. 前端 ---JS中的面向对象

    JS中的面向对象   创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 ...

  2. python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  3. 前端JavaScript(3)-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  4. Day046--JavaScript-- DOM操作, js中的面向对象, 定时

    一. DOM的操作(创建,追加,删除) parentNode 获取父级标签 nextElementSibling 获取下一个兄弟节点 children 获取所有的子标签 <!DOCTYPEhtm ...

  5. 《JS中的面向对象技术》

    内容要点: 1.什么是对象:JS权威指南学习总结-第六章 ,(有句话:一切都是对象) 2.什么面向对象 使用对象时,只关注对象提供的功能,不关注其内部细节,比如jQuery.面向对象是一种通用思想,并 ...

  6. js中的面向对象入门

    什么是对象 我们先来看高程三中是如何对对象进行定义的 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个 ...

  7. JS中OOP之模拟封装和继承和this指向详解

    大家好,今天我带大家学习一下js的OOP, 大家都知道,面向对象有三个基本特征,继承,封装和多态,面向对象的语言有那么几种,C++,PHP,JAVA等,而功能强大的JS可以模拟实现面向对象的两大特征, ...

  8. 深入解读 Js 中的面向对象编程

    前言:今天看了一篇文章觉得很不错,所以给大家分享一下,也许很多人都看过面向对象编程甚至写过这样博客,觉得面向对象编程就那样,没啥好说的,那可能是因为你对这方面知识已经了解,可以选择性跳过.那如果有更通 ...

  9. js中的面向对象程序设计

    面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...

  10. js中的面向对象--类似于类的概念

    创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 使用object va ...

随机推荐

  1. T-SQL查询高级--理解SQL SERVER中非聚集索引的覆盖,连接,交叉和过滤

      写在前面:这是第一篇T-SQL查询高级系列文章.但是T-SQL查询进阶系列还远远没有写完.这个主题放到高级我想是因为这个主题需要一些进阶的知识作为基础..如果文章中有错误的地方请不吝指正.本篇文章 ...

  2. Embedded之Stack之二

    1 Function Programming languages make functions easy to maintain and write by giving each function i ...

  3. OpenCV向JNI层的参数转换

    九层之台,起于累土:千里之堤毁于蚁穴:成者半于九十.最近工程项目完全可以调试,却最后在 OpenCV向JNI层的参数转换 这个节点上遇到麻烦,看来得好好的思考一番,仔细寻找其中的纰漏. 一.实例 根据 ...

  4. Maven服务器的使用之Maven桌面项目和Maven Web项目的创建

    Maven的使用 Maven功能强大, 可以参与管理软件的整个生命周期. Java软件开发中的jar包管理更是Maven的绝技. 1.创建Maven桌面项目 1.1 选择菜单创建Maven项目 1.2 ...

  5. 连接(JOIN)运算

    内连接--INNER JOIN 此处用商品表(product)和商店商品表(ShopProduct)测试,外键:product_id select sp.shop_id, sp.shop_name, ...

  6. CDR中国元素圆形花纹矢量图制作流程

    在论坛中看到这样一个问题,想要使用CorelDRAW矢量绘图工具做出下图所示的中国元素圆形花纹矢量图,小编潜心研究一下,最终有了绘制方法,今天给大家分享下. 步骤一:画同心圆,先画出10个,这个是根据 ...

  7. python tips:迭代器与可迭代对象

    for循环 for i in s: print(i) 在上述for循环中,不断地将s中的值赋值给i,然后打印出来.这种只针对s中元素的循环称为对s的迭代,能够迭代的s称为可迭代的. python为了实 ...

  8. Java基本排序算法

    转载来自:https://www.jianshu.com/p/5e171281a387 一遍记住Java常用的八种排序算法与代码实现   1.直接插入排序 经常碰到这样一类排序问题:把新的数据插入到已 ...

  9. 【习题 4-8 UVA - 12108】Extraordinarily Tired Students

    [链接] 我是链接,点我呀:) [题意] [题解] 一个单位时间.一个单位时间地模拟就好. 然后对于每个人. 记录它所处的周期下标idx 每个单位时间都会让每个人的idx++ 注意从醒着到睡着的分界线 ...

  10. Ubuntu 14.04远程登录服务器

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51285545 本文讲述在Ubuntu ...