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的面向对象学习篇(封装是一门技术和艺术)——温故知新(二)
下面全面介绍封装和信息隐藏. 通过将一个方法或属性声明为私用的,可以让对象的实现细节对其它对象保密以降低对象之间的耦合程度,可以保持数据的完整性并对其修改方式加以约束.在代码有许多人参与设计的情况下, ...
随机推荐
- Hdp 4 window MR 注意事项
1,本机未安装HDP, 在代码中加一个环境变量,跳过检查. Environment.SetEnvironmentVariable("HADOOP_HOME", @"D ...
- elasticsearch添加head插件
首先,肯定是安装elasticsearch啦,我这里是直接在官网上下载rpm包安装的. 官网:https://www.elastic.co/downloads/elasticsearch elasti ...
- JavaScript的高级知识---词法分析
JavaScript的高级知识---词法分析 词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 函数在运行的瞬间, ...
- js中的slice和splic
一:slice 的用法 slice() 用于数组方法可从已有的数组中返回选定的元素,也就是在该方法中指定的元素.该方法不会改变原数组,,返回值是一个新的数组. 选取的范围是 从 当前位(0) 开始(索 ...
- Python web前端 07 函数及作用域
Python web前端 07 函数及作用域 一.函数 1.有名函数和匿名函数 #函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 #函数就是包裹在花括号里面的代码块,前面使用了关键字fun ...
- liunx php 安装 redis 扩展
切换到安装目录: cd /usr/local/ 下载php redis扩展:wget http://pecl.php.net/get/redis-2.2.8.tgz 更改名称压缩包名称: mv re ...
- C++_新特性2-RTTI运行阶段类型识别
这部分属于C++的新特性,感觉比较高阶的特性.我把它归于属于奇技淫巧的范畴.了解即可. RTTI是运行阶段类型识别(Runtime Type Identification)的简称. 这是添加到C++中 ...
- base64的python实现
写了一个函数,自己按照base64的规则转换一个字符串. # /usr/bin/python # encoding: utf-8 base64_table = ['A', 'B', 'C', 'D', ...
- c语言实现队列的基本操作
话不多说,直接代码 #include"stdio.h" #include"stdlib.h" typedef struct QNode{ int date; s ...
- 深入应用C++11:代码优化与工程级应用》勘误表
https://www.cnblogs.com/qicosmos/p/4562174.html