JS中类的概念
类,实际上就是一个function,同时也是这个类的构造方法,new创建该类的实例,new出的对象有属性有方法。
方法也是一种特殊的对象。

类的方法
在构造方法中初始化实例的方法(就是在构造方法中直接编写方法,并new实例化)是不推荐的,消耗内存(每次实例化的时候都是重复的内容,多占用一些内存,既不环保,也缺乏效率)。
所有实例是共有的,创建多个实例不会产生新的function,推荐在类的prototype中定义实例的方法,
prototype中的方法会被所有实例公用。

1. 仿照jQuery封装类
匿名函数

(function () {
//
})(); var Id = function (i) {
this.id = document.getElementById(i);
};
window.$ = function (i) {
return new Id(i);
}; console.log($('main'));
function Cat(name, color) {
this.name = name;
this.color = color;
} var cat1 = new Cat('大毛', '黄色');
var cat2 = new Cat('二毛', '黑色'); Cat.prototype.a = 'aaa';
Cat.prototype.type = '猫科动物';
Cat.prototype.eat = function () {
alert('吃老鼠');
}; cat1.eat();
cat2.eat(); console.log(cat1.name);
console.log(cat2.color); // cat1和cat2会自动含有一个constructor属性,指向它们的构造函数。
console.log(cat1.constructor == Cat);
console.log(cat2.constructor == Cat); // Javascript还提供了一个instanceof运算符,验证原型对象与实例对象之间的关系。
console.log(cat1 instanceof Cat);
try {
console.log(a instanceof Cat);
} catch (e) {
console.log(e);
}

所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。
Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。

prototype模式的验证方法
1. isPrototypeOf() 判断某个prototype对象和某个实例之间的关系
2. hasOwnProperty() 判断一个属性是本地属性还是继承自prototype对象的属性
3. in 判断是否在某个对象里

function Cat(name, color) {
this.name = name;
this.color = color;
} Cat.prototype.type = '猫科动物'; var cat1 = new Cat('大毛', '黄色');
var cat2 = new Cat('二毛', '黑色'); console.log(Cat.prototype.isPrototypeOf(cat1));
console.log(Cat.prototype.isPrototypeOf(cat2)); console.log(cat1.hasOwnProperty('name'));
console.log(cat2.hasOwnProperty('type')); console.log('name' in cat1);
console.log('type' in cat1);

未完:构造函数的继承:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html
非构造函数的继承:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance_continued.html

JS的封装(JS插件的封装)的更多相关文章

  1. js封装成插件

    由于项目原因,工作一年多还没用js写过插件,项目太成熟,平时基本都是在使用已经封装好的功能插件.感觉自己好low......这两天想自己抽空写一个canvas画统计图与折现图的插件,所以就去网上学习了 ...

  2. 封装js插件学习指南

    封装js插件学习指南 1.原生JavaScript插件编写指南 => 传送门 2.如何定义一个高逼格的原生JS插件 =>传送门 3.手把手教你用原生JavaScript造轮子 =>  ...

  3. JS弹出框插件zDialog再次封装

    zDialog插件网址:http://www.jq22.com/jquery-info2426 再次封装zDialog的代码: (function ($) { $.extend({ iDialog: ...

  4. seajs封装js方法

    必须要先引入sea.js文件 <script src="js/sea.js"></script> 其次,引入其他js文件 <script> se ...

  5. 封装常用的js(Base.js)——【01】理解库,获取节点,连缀,

    封装常用的js(Base.js)——[01]理解库,获取节点,连缀,  youjobit07 2014-10-10 15:32:59 前言:       现如今有太多优秀的开源javascript库, ...

  6. 封装js千分位加逗号和删除逗号

    //封装js千分位加逗号和删除逗号 alert( format(2545678754.020001) ) //2,545,678,754.03 alert( format(-2545678754.02 ...

  7. js cookie创建读取删除函数封装

    js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的 ...

  8. js使用工具将表单封装成json字符串传到后台,js截取字符串(学生笔记)

    <script src="js/jquery.min.js"></script> <script src="https://cdn.boot ...

  9. Asp.net封装js的类

    using System; using System.Collections.Generic; using System.Text; using System.Web; using System.We ...

  10. 深入js的面向对象学习篇(封装是一门技术和艺术)——温故知新(二)

    下面全面介绍封装和信息隐藏. 通过将一个方法或属性声明为私用的,可以让对象的实现细节对其它对象保密以降低对象之间的耦合程度,可以保持数据的完整性并对其修改方式加以约束.在代码有许多人参与设计的情况下, ...

随机推荐

  1. python之读取文件的测试数据

    假设我们有一个叫testdata.txt的文件,现在在这个文件里面有测试数据,我们怎么利用前2小章学习的知识,读取测试数据呢? 测试数据如下: url:https://www.cnblogs.com/ ...

  2. angular model-dialog 关闭按钮

    <button class="close" data-dismiss="modal" type="button" aria-label ...

  3. Kibana6.x.x源码分析--启动时无反应分析

    今天执行启动命令后,不报错,但是也没有反应,一时不知道是什么原因造成的,后来经过分析发现,无意间删除了根目录下的一个文件夹plugins,重新创建上这个文件夹后,再次运行就OK了.

  4. WIN7中 HttpListener 拒绝访问 异常解决 C#

      WIN7中 HttpListener 拒绝访问 异常解决 C# http://www.cnblogs.com/cmdszh/archive/2012/08/16/httplistener.html ...

  5. P2056 [ZJOI2007]捉迷藏

    传送门 如果没有修改显然就直接点分治 有修改那就动态点分治 动态点分治就是在点分树上维护一些东西,查询时也在点分树上查 因为点分树深度是$log$的所以可以保证时间复杂度 此题我们需要在点分树上维护 ...

  6. ZQUOJ 22854 (优先队列+剪枝)

    题目:给出K , N , M   :  N为顶点数 , M为边数  : 求K个从1到N的不重复的最短边 , 可以来回的走: 分析:很自然的就可以想到用个优先队列广收下K次终点嘛 , 但是.0.0 爆了 ...

  7. Tarjan算法打包总结(求强连通分量、割点和Tarjan-LCA)

    目录 Tarjan打包总结(求强连通分量.割点和Tarjan-LCA) 强连通分量&缩点 原理 伪代码 板子(C++) 割点 原理 伪代码 最近公共祖先(LCA) 原理 伪代码 板子 Tarj ...

  8. 记一次ctf比赛解密题的解决(可逆加密基本破解之暴力破解)

    题目是这个样子的: code.txt的内容是这样: 有点吓人木?233333 其实解密之后是这样的: 找到一点安慰没? 好了,废话不多说.讲解一下思路吧. 我们知道base64加密是属于可逆加密的.简 ...

  9. TensorFlow-多层感知机(MLP)

    TensorFlow训练神经网络的4个步骤: 1.定义算法公式,即训练神经网络的forward时的计算 2.定义损失函数和选择优化器来优化loss 3.训练步骤 4.对模型进行准确率评测 附Multi ...

  10. PIE SDK地图范围设置

    1.功能简介 地图范围设置主要就是对图层的地图浏览控制,例如地图的放大.缩小.漫游.全图显示.1:1视图.比例尺等功能,能更好的与地图有一个互动的地图浏览体验.PIE SDK对地图范围设置主要利用IC ...