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. Android_传感器光学

    上一篇写了一个小案例方向传感器,与这光学传感器原理大致类似,但其实代码的主要区别得到的类型不一样在这里我一一列举出来: * Sensor.TYPE_ORIENTATION:方向传感器. * Senso ...

  2. C#自动缩进排列代码的快捷键 c# 代码重新排版 变整齐

    C#自动缩进排列代码的快捷键:  ctrl + k + d 1.小技巧, 可以把最后一个}去掉, 重新写下,就可以达到排版的效果. 2.快捷键:编辑-高级-设置文档的格式 快捷键Ctrl+E,D,设置 ...

  3. ROS和OpenCV的对接cv_bridge

    做一个诚实的ROS教程搬运工............................. 官网链接:http://wiki.ros.org/cv_bridge 一.Package Summary Rel ...

  4. 11.03 在外链接中用OR逻辑

    select e.ename,d.deptno,d.dname,d.locfrom dept d left join emp e on(d.deptno = e.deptnoand (e.deptno ...

  5. phpstorm 使用

    常用快捷 ctrl + / 单行注释 Alt+1 隐藏左侧任务栏 设置 1:control+shift+A功能可以搜索对应功能,把mouse:Change font size(Zoom) ...的按钮 ...

  6. myeclipse中代码不显示SVN版本号

    打开 : windows ->preferences->General->Appearance->Lable Decoration s 勾选其中的 SVN 项即可. 如果以上方 ...

  7. python 动态修改 类和实例 的方法

    相信很多朋友在编程的时候都会想修改一下已经写好的程序行为代码,而最常见的方式就是通过子类来重写父类的一些不满足需求的方法.比如说下面这个例子. class Dog: def bark(self): p ...

  8. 结构体、枚举、联合(day14)

    一个存储区的地址必须是它自身大小的整数倍 (double类型存储区的地址只需要是4的 整数倍) 这个规则叫数据对齐 结构体里面的子存储区通常也需要遵守数据 对齐的规则 数据对齐会造成结构体内部子存储区 ...

  9. 51nod1185 威佐夫游戏 V2【博弈论】

    有2堆石子.A B两个人轮流拿,A先拿.每次可以从一堆中取任意个或从2堆中取相同数量的石子,但不可不取.拿到最后1颗石子的人获胜.假设A B都非常聪明,拿石子的过程中不会出现失误.给出2堆石子的数量, ...

  10. django-celery-win10

    setting初始化: 定时任务 增加tasks 启动: