//                       封装
//生成实例对象的原始模式
//假如我们把一个动物看成一个对象 var cat = { //那么它有名字和颜色两个属性
name:'',
color:''
}; //接下来我们根据原形对象来生成实例对象 var cat1 = {}; //创建一个空对象
cat1.name = "猫"; //按照原形对象的属性赋值
cat1.color = "黑色"; //这就是最简单的封装
//原始模式的缺点:如果我们要创建多个对象,那么代码会比较麻烦,并且我们看不出实例对象与原型之间有任何联系。 //改进:
//我们可以写一个函数,解决代码重复的问题
function Cat( name, color){
return{
name : name,
color : color
}
} //然后生成实例对象,就相当于是在调用函数。但是这两个实例对象并没有什么联系,不能反映出它们是同一个原型对象
var Cat1 = new Cat("猫","黑色");
var Cat1 = new Cat("猫","黄色"); //构造函数模式
//构造函数模式可以解决从原形对象生成实例的问题
//构造函数就是在一个普通的函数的内部使用了this变量,并且可以通过new一个构造函数来生成实例,并且this会绑定在实例对象上
function Cat(name, color){
this.name = name;
this.color = color;
} var Cat1 = new Cat("猫","蓝色");
var Cat2 = new Cat("猫","绿色");
console.log(Cat1);
console.log(Cat2); //生成的实例对象会有一个constructor属性,constructor可以指向它们的构造函数;
alert(Cat1.constructor == Cat); //true
alert(Cat1 instanceof Cat); // true instanceof可以验证原型对象与实例对象之间的关系 //构造函数模式浪费内存问题 function Cat(name, color){
this.name = name;
this.color = color;
this.typ = "hello",
this.ce = function(){
console.log("我是ce")
}
} var Cat1 = new Cat("name", "color");
var Cat2 = new Cat("name1", "color1");
alert(Cat1.typ+Cat1.ce());
alert(Cat2.typ+Cat2.ce()); /*会弹出 属性并且会执行ce()方法,问题来了,如果我们有很多个实例对象,
那么就会有很多个this.typ属性和ce()方法,并且里面的值都是重复的,这样会浪费不必要的内存以及效率。 prototype模式
js规定了每个构造函数都有一个prototype属性,指向另一个对象,这个对象的所有属性和方法都会被构造函数
的实例和方法继承,这样我们可以把那些不变的属性和方法定义在prototype对象上。
*/ function Cat(name){
this.name = name;
}
Cat.prototype.iio = "prototype";
Cat.prototype.ce = function (){ console.log("方法")} var Cat1 = new Cat();
var Cat2 = new Cat();
console.log(Cat1.iio); //打印:prototype
Cat1.ce(); //打印:方法
console.log(Cat2.iio); //打印:prototype
//这时的iio属性和ce方法其实都是同一个内存地址,指向prototype对象,因此提高了效率 alert(Cat.prototype.isPrototypeOf(Cat1));
//返回true isPrototypeOf()方法用来判断某个prototype对象和某个实例之间的关系 alert(Cat1.hasOwnProperty("name")) //返回true
alert(Cat1.hasOwnProperty("iio")) //返回false
//用来判断某一属性到底是本地属性还是继承prototype对象的属性 alert("name" in Cat1);
for(var prop in Cat1){ console.log(cat1[prop])}
//可以判断某个实例是否有某个属性,无论是本地的还是继承的,并且还可以遍历某个对象的所有属性

注:参考大佬阮一峰的文章http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html

这是我学到的知识,大家一起学。

了解javascript里面的 封装的更多相关文章

  1. javascript通用事件封装

    随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...

  2. 我自己的Javascript 库,封装了一些常用函数 Kingwell.js

    我自己的Javascript 库,封装了一些常用函数 Kingwell.js 博客分类: Javascript javascript 库javascript库  现在Javascript库海量,流行的 ...

  3. JavaScript设计模式之一封装

    对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,今天我想讲讲如何在Javascript中利用封装这个特性,开讲! 我们会把现实中的一些事物抽象成一个Class并且把 ...

  4. 跨浏览器的javascript事件的封装

    一,跨浏览器的事件处理程序 1,DOM0级处理事件 将一个函数赋值给一个事件处理程序属性. 事件流:冒泡阶段. 使用: 为元素增加事件: var btn = document.getElementBy ...

  5. JavaScript大杂烩3 - 理解JavaScript对象的封装性

    JavaScript是面向对象的 JavaScript是一种基于对象的语言,你遇到的所有东西,包括字符串,数字,数组,函数等等,都是对象. 面向过程还是面向对象? JavaScript同时兼有的面向过 ...

  6. 第一百六十一节,封装库--JavaScript,完整封装库文件

    封装库--JavaScript,完整封装库文件 /** *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀 **/ /** 前台调用 * 每次调用$()创建库对象, ...

  7. 第一百四十三节,JavaScript,利用封装库做百度分享

    JavaScript,利用封装库做百度分享 效果图 html代码 <div id="share"> <h2>分享到</h2> <ul> ...

  8. 如何在Javascript中利用封装这个特性

    对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,那么如何在Javascript中利用封装这个特性呢? 我们会把现实中的一些事物抽象成一个Class并且把事物的属性( ...

  9. 2018.2.2 JavaScript中的封装

    JavaScript中的封装 1.封装的概念 通过将一个方法或者属性声明为私用的,可以让对象的实现细节对其他对象保密以降低对象之间的耦合程度,可以保持数据的完整性并对其修改方式加以约束,这样可以使代码 ...

  10. javascript里的封装

    用javascript闭包的特性,可以模拟实现私有变量.私有方法. var myObject = =(function(){ var privateValue; function privateMet ...

随机推荐

  1. 在没联网环境下,启动tomcat出错

    使用SSH框架,在联网情况下,项目可以正常运行,当一旦断网,则启动服务器报错: org.hibernate.HibernateException: Could not parse configurat ...

  2. 新装的SSMS一打开就显示VS许可证过期,但VS又运行正常,解决方法。

    1.出现问题如下图: 2.解决方法 打开控制面板->程序卸载->找到Microsoft Visual Studio *** Shell(****),右击-修复. 3.修复好了,然后重启电脑 ...

  3. 初始化仓库(git init)

    创建新的仓库 首先进入需要初始化的目录,然后输入git init D:\Git\test λ git init Initialized empty Git repository in D:/Git/t ...

  4. Pytorch如何用预训练模型提取图像特征

    方法很简单,你只需要将模型最后的全连接层改成Dropout即可. import torch from torchvision import models # load data x, y = get_ ...

  5. tp5.0 queue 队列操作

    检查是否安装redis(没有请自行百度安装): phpinfo: 配置thinkphp-queue,没有请执行 composer require topthink/think-queue 加入: 创建 ...

  6. 学习笔记——单片机简介 & 点亮LED & 流水灯 & 电路基础【更新Ing】

    视频地址:https://www.bilibili.com/video/av10765766 超详细!!!!!! 单片机内部三大资源 [资源:单片机可提供使用的东西] FLASH 可以重复擦写 断电后 ...

  7. 区块链之智能合约 solidity踩坑 --上篇

    概述 最近在写合约时遇到一些坑,做一下总结: 介绍主要分一下三个方面: 对区块链的简单描述 结合业务场景,编写简单智能合约,时遇到的坑(上篇) assembly 的使用说明(下篇) 正文 进入正题之前 ...

  8. JAVA学习笔记(1)—— eclipse自动补全和主题及字体配置

    1.自动补全功能 (1)打开 Eclipse -> Window -> Perferences (2)选择Java -> Editor -> Content Assist -& ...

  9. 逆元知识普及(扫盲篇) —— from Judge

    watch out 本文是博主的 csdn 上搬过来的,格式有点崩,看不下去的可以去 博主的 csdn上看(上面 格式会好很多,并且有些公式也用 $\LaTeX$  update 上去了) 最近有点颓 ...

  10. 从头开始学JAVA[Day01]

    1.Java程序的执行过程必须经过先编译,后解释两个步骤 Jvm的统一标准,具体定义了JVM的如下细节: --指令集 --寄存器 --类文件格式 --栈 --垃圾回收堆 --存储区 2.编译Java程 ...