1. 什么是自执行的匿名函数?
   它是指形如这样的函数: (function {// code})();
2. 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错?
3. 分析
(1). 首先, 要清楚两者的区别: (function {// code})是表达式, function {// code}是函数声明.
(2). 其次, js"预编译"的特点: js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.
(3). 当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;
当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.

另外, 函数转换为表达式的方法并不一定要靠分组操作符(),我们还可以用void操作符,~操作符,!操作符……

例如:
bootstrap 框架中的插件写法:
!function($){
  //do something;
}(jQuery);


(function($){
  //do something;
})(jQuery); 是一回事。

匿名函数最大的用途是创建闭包(这是JavaScript语言的特性之一),并且还可以构建命名空间,以减少全局变量的使用。
例如:
var a=1;
(function()(){
    var a=100;
  })();
alert(a); //弹出 1
更多 闭包和匿名函数 可查看 Javascript的匿名函数与自执行 这篇文章。

<摘自:http://www.cnblogs.com/joey0210/p/3408349.html>

举一反三:

不难发现,如下代码也是可以的:

<script>
var str = function(){
var s1 = "a";
var s2 = "b";
return s1+s2;
}();
alert(str);
</script>

执行结果:弹出"ab"。

2.  js中this指代的对象

js 中this指代的是当前的上下文对象,即离他最近的一个function对象(也就是js中的类)。

<script type = "text/javascript">
(function() { var data = {
movePage: function() {
this.arg = 1;
this.dowhat = {
method1: function() {
alert("1当前对象的arg属性值:" + this.arg);
},
method2: function() {
alert("2当前对象的arg属性值:" + this.arg);
}
};
}
}; var test = new data.movePage();
// 我们通常的调用函数的形式。alert的值为undefined
test.dowhat.method1();
// 改变this对象指代的当前上下文。
// 也就是说:这句代码会执行method1方法,并且将this指代的当前上下文指到test对象,即movePage函数。
// 而movePage函数中arg的值为1,那么alert后的值为1
test.dowhat.method1.call(test); })();
</script>

执行结果:第一次弹出:undefined  第二次弹出:1

小技巧:

  我们可以通过使用alert(xxx);来看一个对象是什么类型的。我们可以得到类似于下面的alert框
         

通过上面的描述和例子,我们就不难发现:

例1:

  1. $("#textbox").hover(
  2. function() {
  3. this.title = "Test";   // 也可以通过$(this)拿到jquery对象,然后使用$(this).attr("title", "Test");来达到目的
  4. }
  5. );

上面的例子中this对象指向的是js中原生的js对象,所以this也就是js中原生的dom对象。

例2:

jquery插件编写里总是会用到如下的代码:

(function( $ ) {
$.fn.myPlugin = function() {
// Do your awesome plugin stuff here
    return this.each(function(){.......});//主要为了能够链式调用,将jqery对象return
};
})( jQuery );
这里的this指向的是myPlugin对象,也就是jquery对象,所以它可以直接使用jquery的each方法

js封装 与 js高级用法 问题集合的更多相关文章

  1. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

  2. 【转】Vue.js中 watch 的高级用法

    假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=&q ...

  3. Vue.js中 watch 的高级用法

    假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=&q ...

  4. js中“||”和“&&”的高级用法

    例1:用于赋值&&:从左往右依次判断,当当前值为true则继续,为false则返回此值(是返回未转换为布尔值时的原值哦)|| : 从左往右依次判断,当当前值为false则继续,为tru ...

  5. 原生JS封装 toast 弹层,自动关闭

    由于公司业务需求,要一个公共toast ,下面是自己封装的一个. css: .toast { text-align: center; min-height: 70px; width: 220px; c ...

  6. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  7. JsQuick--个人封装的Js库

    JsQuick 该库为本人封装的Js库,尚未进行浏览器兼容 /** * 快速框架 版本:1.0.0 * 日期:2015.02.26 * 作者:简楚恩 */ /** * 快速获取控件类 */ var $ ...

  8. 【JavaScript框架封装】使用原生js封装的类似于JQuery的框架及核心源码分享(多文件版本)

    这个版本的JQuery是对上一个版本的JQuery,使用了require.js进行了二次封装,基本上把前面的每一个框架封装成为一个单独的模块,最终的目录结构如下: 由于代码量和目录比较多,这个封装好的 ...

  9. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

随机推荐

  1. PHP实现动态规划背包问题

    有一堆货物,有各种大小和价值不等的多个物品,而你只有固定大小的背包,拿走哪些能保证你的背包带走的价值最多 动态规划就是可以记录前一次递归过程中计算出的最大值,在之后的递归期间使用,以免重复计算. &l ...

  2. 云主机-vps购买

    Linode VPS主机 http://jingyan.baidu.com/article/676629972be5e054d41b846c.html Linode VPS可以说是世界上最好的VPS, ...

  3. C编码-1

    两个关键点,一个是要懂C语法,另一个要懂业务知识,即能够分解问题 字节序测试程序 不同cpu平台上字节序通常也不一样,下面写个简单的C程序,它可以测试不同平台上的字节序. 网络字节序说是大端字节序. ...

  4. RabbitMQ 集群与高可用配置

    集群概述 通过 Erlang 的分布式特性(通过 magic cookie 认证节点)进行 RabbitMQ 集群,各 RabbitMQ 服务为对等节点,即每个节点都提供服务给客户端连接,进行消息发送 ...

  5. html之input系列标签

    input属性太多,我这里仅列出几个我喜欢的吧. disabled:首次加载时禁用此元素 checked:首次加载时选中此元素 form:输入字段所属的一个或多个表单 hieght:定义input字段 ...

  6. centos 6.5 下载

    https://wiki.centos.org/Manuals/ReleaseNotes/CentOS6.5 sha1sum i386: 67ea68068ae53d1f23431072ec0288b ...

  7. Spring Data Solr教程(翻译) 开源的搜索服务器

    Solr是一个使用开源的搜索服务器,它采用Lucene Core的索引和搜索功能构建,它可以用于几乎所有的编程语言实现可扩展的搜索引擎. Solr的虽然有很多优点,建立开发环境是不是其中之一.此博客条 ...

  8. Long 陷阱

    String str = "10"; System.out.print(Long.getLong(str)); System.out.print(Long.valueOf(str) ...

  9. 设置远程访问Oracle数据库

    我这里设置的是别人远程访问我本地的数据库. 方法: 通过WiFi共享,别人连接该共享的WiFi,来访问我的数据库(局域网). 步骤1: 下载WiFi共享大师. 步骤2: 安装好后开启WiFi. 开启后 ...

  10. HTML之布局position理解

    HTML中的布局,一个比较难以理解的概念,就是position了,W3C上的解释,position有如下几种: 1. static,默认值,也就是在样式中不指定position 2. fixed 3. ...