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. DOM高级编程

    前言:W3C规定的三类DOM标准接口(换图)Core DOM(核心DOM),适用于各种结构化文档:XML DOM(Java OOP学过),专用于XML文档:HTML DOM,专用于HTML文档,下面了 ...

  2. jquery Contains 实现查询

    var filter = $(this).val(); var filterResult = $(this).find('h2:Contains(' + filter + ')'); if (filt ...

  3. Android 性能测试初探(四)

    书接上文 Android 性能测试初探(三) 自从 cpu及内存后,GPU 这个词对于 PC 性能测试者也不陌生了,什么 3Dmax,安兔兔之类的第三方软件让 GPU 在移动端性能测试领域都知晓,但对 ...

  4. kvm之 virt-install工具命令详解

    一.virt-install是一个命令行工具,它能够为KVM.Xen或其它支持libvrit API的hypervisor创建虚拟机并完成GuestOS安装:此外,它能够基于串行控制台.VNC或SDL ...

  5. PAT_A1142#Maximal Clique

    Source: PAT A1142 Maximal Clique (25 分) Description: A clique is a subset of vertices of an undirect ...

  6. eas之style接口

    Obj可以是KDTable对象,也可以是IRow,IColumn,ICell对象锁定Obj.getStyleAttributes().setLocked(true);Obj.getStyleAttri ...

  7. HTML学习笔记之基本介绍

    超文本标记语言 (Hyper Text Markup Language,HTML)不是一种编程语言,而是一种标记语言,用一套标记标签描述网页 HTML 标记标签又被称为 HTML 标签(HTML Ta ...

  8. 20190218-学习python使用shelve遇到raise error, "db type could not be determined"

    照书上敲代码,运行了提示raise error, "db type could not be determined",现场如下: ubuntu-vm:~/code/massageb ...

  9. ecshop3 调用指定分类下推荐/热卖/新品商品,可指定调用数量

    第一步:--------------------------------------------------------------------------------------/** * 取指定分 ...

  10. 通过反射,对javabean属性进行过滤操作

    /** * 根据属性名获取属性值 * @param fieldName 属性名 * @param o 传入对象 * @return */ private Object getFieldValueByN ...