JS的封装(JS插件的封装)
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插件的封装)的更多相关文章
- js封装成插件
由于项目原因,工作一年多还没用js写过插件,项目太成熟,平时基本都是在使用已经封装好的功能插件.感觉自己好low......这两天想自己抽空写一个canvas画统计图与折现图的插件,所以就去网上学习了 ...
- 封装js插件学习指南
封装js插件学习指南 1.原生JavaScript插件编写指南 => 传送门 2.如何定义一个高逼格的原生JS插件 =>传送门 3.手把手教你用原生JavaScript造轮子 => ...
- JS弹出框插件zDialog再次封装
zDialog插件网址:http://www.jq22.com/jquery-info2426 再次封装zDialog的代码: (function ($) { $.extend({ iDialog: ...
- seajs封装js方法
必须要先引入sea.js文件 <script src="js/sea.js"></script> 其次,引入其他js文件 <script> se ...
- 封装常用的js(Base.js)——【01】理解库,获取节点,连缀,
封装常用的js(Base.js)——[01]理解库,获取节点,连缀, youjobit07 2014-10-10 15:32:59 前言: 现如今有太多优秀的开源javascript库, ...
- 封装js千分位加逗号和删除逗号
//封装js千分位加逗号和删除逗号 alert( format(2545678754.020001) ) //2,545,678,754.03 alert( format(-2545678754.02 ...
- js cookie创建读取删除函数封装
js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的 ...
- js使用工具将表单封装成json字符串传到后台,js截取字符串(学生笔记)
<script src="js/jquery.min.js"></script> <script src="https://cdn.boot ...
- Asp.net封装js的类
using System; using System.Collections.Generic; using System.Text; using System.Web; using System.We ...
- 深入js的面向对象学习篇(封装是一门技术和艺术)——温故知新(二)
下面全面介绍封装和信息隐藏. 通过将一个方法或属性声明为私用的,可以让对象的实现细节对其它对象保密以降低对象之间的耦合程度,可以保持数据的完整性并对其修改方式加以约束.在代码有许多人参与设计的情况下, ...
随机推荐
- 11、C内存四区模型
转载于:https://blog.csdn.net/wu5215080/article/details/38899259 内存四区模型 图1.内存四区模型流程说明1.操作系统把物理硬盘代码load到内 ...
- Image组件
/* Image* 用于显示图片的组件,包括网络图片,静态资源 * 常用性能: * resizeMode 图片适应模式 cover , contain , stretch * source 图片的引用 ...
- Java 简单的RPC 实现
借用了网上某大神的例子.... 目录结构是这样的... RpcFramework 主要是两个方法.一个是暴露服务,一个为引用服务.暴露服务的主要作用是声明一个接口的实现类.可以通过socket 远程调 ...
- 【算法笔记】B1032 挖掘机技术哪家强
1032 挖掘机技术哪家强 (20 分) 为了用事实说明挖掘机技术到底哪家强,PAT 组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入格式: 输入在第 1 行给出不超过 1 ...
- 未在本地计算机上注册microsoft.jet
未在本地计算机上注册microsoft.jet http://www.microsoft.com/zh-cn/download/confirmation.aspx?id=13255
- [一首诗] Life and Death 生与死
Life and Death 生与死 I strove with none, 我和谁都不争, for none was worth my strife, 和谁争我都不屑: Nature I loved ...
- Apache Shiro(四)-登录认证和权限管理WEB支持(Servlet)
新建web项目 web.xml 修改web.xml,在里面加了个过滤器. 这个过滤器的作用,简单的说,就是 Shiro 入门里的TestShiro 这部分的工作,悄悄的干了. //加载配置文件,并获取 ...
- 创建本地maven仓库
1.首先从下面地址下载nexus-oss-webapp-2.3.1-01 http://pan.baidu.com/s/1pKOLdbH 2.修改配置文件: 打开:*nexus-oss-webapp- ...
- Windows加密技术概述
Windows加密是安全体系的重要基础和组成部分.现代CPU的保护模式是系统安全的硬件基石,基于CPU硬件的特权分级,Windows让自身的关键系统代码运行在高处理器特权级的内核模式,各种应用程序则运 ...
- FZU 1921——栀子花开——————【线段树单点更新】
栀子花开 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status ...