ECMAScript 创建自己的js类库

ECMAScript中最有意思，最强大的地方在于函数。最进在完善自己的js类库的时候发现我们经常在用函数，但真的很少有人懂得ECMAScript函数功能。
1：什么是函数？
　　ECMAScript函数其实就是对象，每个函数都是Function类型的实例而且有属性和方法，由于函数是对象，函数名其实就是指向函数对象的指针，不会与某个函数绑定。
2：创建函数的方法


代码如下:

(1):function Person(name)
　　　{
　　　　return name;
　　　}
(2):var Person=function(name)
　　{
　　return name;
　　}
(3)：var Person=new function(“name”,”return name”);(不推荐使用,ECMAScript会解析两次所以不推荐使用)

3：函数声明和函数表达式的不同
　　ECMAScript对函数声明和函数表达式的解析并非一视同仁，解析器会先读取函数声明，并使其在任何代码前都可用。
　　例：


代码如下:

assert(false);
function assert(value, msg) {
if (!value) {
alert (msg || (value + " does not equal true"));
}
}

 
函数表达式为执行到这一行才解析器才会解析


代码如下:

如：assert(false);
var assert= function (value, msg) {
if (!value) {
alert (msg || (value + " does not equal true"));
}
}

 
4：理解this属性
this 属性是我们经常用的属性，其行为与Java,C#,PHP大致类似。


代码如下:

如:window.name='用未来思考现在';
window.name = "用未思考现在;
showName();
function showName() {
alert(this.name);
}

 
5:创建自己的类库插件
简单的介绍了下函数，对于理解函数这些内容远远不够，例如构造函数模式，原形模式，原形链等等都是要花很多时间去理解。
创建类


代码如下:

var Class = function () {
var extclass = function () {
//接收属性传过来的参数
this.init.apply(this, arguments);
}
//给类添加自定义属性
extclass.prototype.init = function () { };
//给prototypr定义别名?
extclass.fn = extclass.prototype;
//定义类的别名?
extclass.fn.parent = extclass;
//给类添加属性
extclass.extend = function (obj) {
var extended = obj.extended;
for (var i in obj) {
extclass.fn[i] = obj[i];
}
if (extended) extended(extclass);
};
//给实例添加属性
extclass.include = function (obj) {
var included = obj.included;
for (var i in obj) {
extclass.fn[i] = obj[i];
}
if (included) included(extclass);
}
return extclass;
}

类库大致的框架构建完成,这样我们创建类可以调用extended方法，创建实例可以调用include方法。下一章节会在此基础上扩展更多功能，基于原型给“类”添加继承。

赞 (0)

相关推荐

  • ECMAScript6的新特性箭头函数（Arrow Function）详细介绍

    箭头函数是ECMAScript 6最受关注的更新内容之一.它引入了一种用「箭头」(=>)来定义函数的新语法,它-它碉堡了~.箭头函数与传统的JavaScript函数主要区别在于以下几点:1.对 this 的关联.函数内置 this 的值,取决于箭头函数在哪儿定义,而非箭头函数执行的上下文环境.2.new 不可用.箭头函数不能使用 new 关键字来实例化对象,不然会报错.3.this 不可变.函数内置 this 不可变,在函数体内整个执行环境中为常量.4.没有arguments对象.更不能通过ar

  • 在NodeJS中启用ECMAScript 6小结（windos以及Linux）

    在NodeJS中启用ES6 (harmony) 版本: 开始吧, Linux下启用 来源: http://h3manth.com/new/blog/2013/es6-on-nodejs/ Node version : v0.11.6 先来看一看版本 harm ;) : $ node --v8-options | grep harm --harmony_typeof (enable harmony semantics for typeof) --harmony_scoping (enable ha

  • ECMAScript6变量的解构赋值实例详解

    数组的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring) var [a, b, c] = [1, 2, 3]; 这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值. 下面是一些使用嵌套数组进行解构的例子 let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo

  • JavaScript高级程序设计（第3版）学习笔记13 ECMAScript5新特性

    接下来应该是BOM和HTML5了,但是鉴于ECMAScript5相对于ECMAScript3的新变化比较多,而且这些变化也非常的有意思,因此在这篇文章中再将我认为的有意思的变化(并非全部变化)集中整理一下,但这里只是列举,不具体展开. 一.语法变化 1.关键字和保留字 在ES3中,使用关键字做标识符会导致"Identifier Expected "错误,而使用保留字做标识符可能会也可能不会导致相同的错误,具体取决于特定的引擎.在ES5中,关键字和保留字虽然不能作为标识符 使用,但可以作

  • ECMAScript6块级作用域及新变量声明（let）

    很多语言中都有块级作用域,但JS没有,它使用var声明变量,以function来划分作用域,大括号"{}" 却限定不了var的作用域.用var声明的变量具有变量提升(declaration hoisting)的效果. ES6里增加了一个let,可以在{}, if, for里声明.用法同var,但作用域限定在块级,let声明的变量不存在变量提升. 示例1: 块级作用域 if function getVal(boo) { if (boo) { var val = 'red' // ...

  • 正则表达式字面量在ECMAScript5中的变化

    在<JavaScript语言精粹>的第72页有这样一段: 用正则表达式字面量创建的RegExp对象来共享同一个单实例: 复制代码 代码如下: function make_a_matcher( ) { return /a/gi; } var x = make_a_matcher( ); var y = make_a_matcher( ); // 注意:x 和 y 是同一个对象! x.lastIndex = 10; document.writeln(y.lastIndex); // 10当你在浏览

  • ECMAScript 创建自己的js类库

    ECMAScript 创建自己的js类库

    ECMAScript中最有意思,最强大的地方在于函数.最进在完善自己的js类库的时候发现我们经常在用函数,但真的很少有人懂得ECMAScript函数功能. 1:什么是函数? ECMAScript函数其实就是对象,每个函数都是Function类型的实例而且有属性和方法,由于函数是对象,函数名其实就是指向函数对象的指针,不会与某个函数绑定. 2:创建函数的方法 复制代码 代码如下: (1):function Person(name) { return name; } (2):var Person=f

  • 利用不到200行代码写一款属于你自己的js类库

    利用不到200行代码写一款属于你自己的js类库

    前言 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力.本文将使用面向对象的方式,来教大家用原生js写出一个类似jQuery这样的类库.我们将会学到如下知识点: 闭包:减少变量污染,缩短变量查找范围 自执行函数在对象中的运用 extend的实现原理 如何实现跨浏览器的事件监听 原型链与继承 接下来我会对类库的核心api进行讲解和展示,文章最后后附带类库的完整源码,在我之前的文章<3分钟教你用原生js实现具有进度监听的文件上传预览组件>中也使用了类似的方式

  • js类库styled-components快速入门教程

    目录 styled-components 是什么? 相对于其他预处理有什么优点? 解决了什么问题? 安装 最基础的使用 传递props props高级用法 塑造组件 组件样式继承 改变组件标签 维护其他属性 动画 结语 styled-components 是什么? styled-components 是一个常用的 css in js 类库.和所有同类型的类库一样,通过 js 赋能解决了原生 css 所不具备的能力,比如变量.循环.函数等. 相对于其他预处理有什么优点? 诸如 sass&less

  • CCPry JS类库 代码

    复制代码 代码如下: function CCPry(){ // // 判断浏览器类型 // this.Browser ={ "isMozilla":(typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined'), &q

  • JS类库Bindows1.3中的内存释放方式分析

    我在前段时间介绍过IE中JavaScript脚本Memory Leak的问题,后来在几位热心网友的讨论下,基本认可了内存泄露的事实和原理.在小规模的测试case下,本来都达到了基本避免IE中脚本的ML问题.可是近来发现只以"仔细"来防止IE中脚本ML似乎是非常困难的一件事情,难道开始的讨论有错误吗? 何谓"仔细"呢?就是说在有对象相互引用的时候,在对象丢弃时(不一定是页面refresh)断开彼此的引用链,特别是脚本中创建的对象和DHTML中的对象间的引用:清除HTM

  • 国内常用的js类库大全(CDN公共库)

    国内站点经常使用的一些 CDN 静态资源公共库加速服务 web开发人员们的福利来了..旨在为大家提供更快很多其它更好的静态资源库的CDN载入库方案! CDN公共库是指将经常使用的JS库存放在CDN节点,以方便广大开发人员直接调用. 与将JS库存放在server单机上相比,CDN公共库更加稳定.快速.一 般的CDN公共库都会包括全球全部最流行的开源JavaScript.JQuery等库.你能够在自己的网页上直接通过script标记引用这些资源.这样做不仅能够为您 节省流量.还能通过CDN加速.获得

  • 写自已的js类库需要的核心代码

    复制代码 代码如下: (function(win) { var toString = Object.prototype.toString; var hasOwn = Object.prototype.hasOwnProperty; var class2type = {}; class2type["[object Boolean]"] = "boolean"; class2type["[object Number]"] = "number

  • AppBaseJs 类库 网上常用的javascript函数及其他js类库写的

    复制代码 代码如下: /*----------------------------------- Web Application JavaScript Library 2009.11 janchie ------------------------------------*/ //String原生对象扩展 置空左右端空格 String.prototype.trim = function(){ return this.replace(/(^[\s\n\t\r]*)|([\s\n\r\t]*$)/g

  • stream.js 一个很小、完全独立的Javascript类库

    <script src='stream-min.js'></script> 下载 stream.js 2Kb minified streams是什么? Streams 是一个操作简单的数据结构,很像数组或链接表,但附加了一些非凡的能力. 它们有什么特别之处? 跟数组不一样,streams是一个有魔法的数据结构.它可以装载无穷多的元素.是的,你没听错.他的这种魔力来自于具有延后(lazily)执行的能力.这简单的术语完全能表明它们可以加载无穷多的元素. 入门 如果你愿意花10分钟的时

  • CI框架实现创建自定义类库的方法

    本文实例讲述了CI框架实现创建自定义类库的方法.分享给大家供大家参考,具体如下: 当我们使用 "类库" 这个词的时候,通常我们指的是位于 libraries 这个目录下的那些类. 接下来我们将介绍 如何在 application/libraries 目录下创建你自己的类库,和全局的框架类库独立开来. 另外,如果你希望在现有的类库中添加某些额外功能,CodeIgniter 允许你扩展原生的类, 或者你甚至可以在你的 application/libraries 目录下放置一个和原生的类库同

随机推荐