• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > javascript知识进阶【this和闭包】

javascript知识进阶【this和闭包】

作者:学习、分享 字体:[增加 减小] 来源:互联网 时间:2017-08-21

学习、分享通过本文主要向大家介绍了javascript,函数,闭包等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

在几种不同的情况下 ,this 指向的各不相同。

全局范围内


console.log(this);

当在全部范围内使用 this,它将会指向全局window对象。

函数调用

        function fun() {
            console.log(this);
        }
        fun();

这里 this 也会指向全局对象。

方法调用

        var test = {
            fun:function () {
                console.log(this);
            }
        }
        test.fun();

这个例子中,this 指向 test 对象。

调用构造函数


        function con() {
            console.log(this);
        }
        new con();

如果函数倾向于和 new 关键词一块使用,则我们称这个函数是 构造函数。 在函数内部,this 指向新创建的对象。

常见误解

尽管大部分的情况都说的过去,不过第二个规则 被认为是JavaScript语言另一个错误设计的地方,因为它从来就没有实际的用途。

var Foo = {}
Foo.method = function() {
    function test() {
        // this 将会被设置为全局对象
    }
    test();
}

一个常见的误解是 test 中的 this 将会指向 Foo 对象,实际上不是这样子的。

为了在 test 中获取对 Foo 对象的引用,我们需要在 method 函数内部创建一个局部变量指向 Foo 对象。

Foo.method = function() {
    var that = this;
    function test() {
        // 使用 that 来指向 Foo 对象
    }
    test();
}

that 只是我们随意起的名字,不过这个名字被广泛的用来指向外部的 this 对象。

可以运行下面代码来更好的理解:

代码片段1:

var name = "The Window";
  var object = {
    name : "My Object",
    getNameFunc : function(){
      return function(){
        return this.name;
      };
    }
  };
  alert(object.getNameFunc()());

代码片段2:

var name = "The Window";
  var object = {
    name : "My Object",
    getNameFunc : function(){
      var that = this;
      return function(){
        return that.name;
      };
    }
  };
  alert(object.getNameFunc()());

二.闭包

作用域

在函数内部用var声明的变量我们可以将它看成是私有变量。

私有变量在函数的外部,或者在它的父级函数中是无法访问到的。

闭包的意义

函数 是 JavaScript 中唯一拥有自身作用域的结构,因此闭包的创建依赖于函数。

function Counter(start) {
    var count = start;
    return {
        increment: function() {
            count++;
        },

        get: function() {
            return count;
        }
    }
}

var foo = Counter(4);
foo.increment();
foo.get(); // 5

实际上increment和get两个函数就是两个闭包,闭包的概念可以这样说:闭包就是能够读取其他函数内部变量的函数

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成”定义在一个函数内部的函数”。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

读取函数内部的变量是闭包存在的一个重要意义:还有一个意义就是让这些变量的值始终保持在内存中。

Counter被赋值给了一个全局变量,这导致Counter会始终存在于内存中,它的局部变量count也不会被垃圾回收机制回收。

比如我们像如下这样操作

Counter(4).increment();
Counter(4).get();

那么得到的结果是4,因为Counter(4)对象并没有被保存,而是调用后被垃圾回收机制回收掉了。

综上:闭包是阻止垃圾回收器将变量从内存中移除的办法,使得在创建变量的执行环境的外面能访问到该变量。

使用闭包的注意事项

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

以上仅代表个人观点,如果有什么错误的地方欢迎指正!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • JavaScript瀑布流布局实现代码
  • Javascript实现页面滚动时导航智能定位
  • JavaScript实现打地鼠小游戏
  • javascript编写简易计算器
  • JavaScript实现无穷滚动加载数据
  • JavaScript仿微信打飞机游戏
  • javascript 中关于array的常用方法详解
  • javascript 中的继承实例详解
  • JavaScript函数表达式详解及实例
  • JavaScript中双向数据绑定详解

相关文章

  • 2017-05-11JavaScript计时器用法分析【setTimeout和clearTimeout】
  • 2017-05-11拖动时防止选中
  • 2017-05-11vue.js学习笔记:如何加载本地json文件
  • 2017-05-11AngularJS实现页面定时刷新
  • 2017-05-11jQuery实现文字自动横移
  • 2017-05-11thinkphp标签实现bootsrtap轮播carousel实例代码
  • 2017-05-11JavaScript实现公历转农历功能示例
  • 2017-05-11Bootstarp 基础教程之表单部分实例代码
  • 2017-05-11Javascript中字符串相关常用的使用方法总结
  • 2017-05-11详解Angualr 组件间通信

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Vue.js父与子组件之间传参示例
    • BootStrap table删除指定行的注意事项(笔记整理)
    • 详解bootstrap的modal-remote两种加载方式【强化】
    • JS前端开发判断是否是手机端并跳转操作(小结)
    • JavaScript实现替换字符串中最后一个字符的方法
    • vue-resource 拦截器使用详解
    • JavaScript基于DOM操作实现简单的数学运算功能示例
    • Bootstrap表单控件使用方法详解
    • 纯js实现html转pdf的简单实例(推荐)
    • Bootstrap轮播图学习使用

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有