您的位置是:网站首页>Javascript编程Javascript编程

js 闭包与原型的应用代码详解

少儿编程网2020-02-14 18:50:38Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介一、闭包Closuresjs中的闭包是函数(一个封闭的对外不公开的包裹结构或空间)1、闭包要解决的问题在函数外部访问不到函数内部的数据要解决的问题就是需要在外部间接的访问函数内部的数据2、基本结构functionouter(){vardata=数据;returnfunctio

一、闭包ClosuresubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

js中的闭包是函数 (一个封闭的对外不公开的包裹结构或空间)ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

1、闭包要解决的问题

  • 在函数外部访问不到函数内部的数据ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  • 要解决的问题就是需要在外部间接的访问函数内部的数据ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

2、基本结构

 function outer(){
        var data = "数据";        return function(){
            return data;
        }
    }
 function outer(){
    var data = "数据";     return {
         getData:function(){
             return data;
         },
         setData:function(value){
             data = value;             return data;
         }
     }
 }

3、闭包的应用

1)用闭包来解决定时器的问题

由于js是单线程执行的,会先执行主任务,然后执行次要任务(包括setTimeOut和setInterval中的回调函数中的代码)

例如:ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

for(var i = 0 ; i < 10; i++){
    setTimeout(function(){
         console.log(i);
     },0);
 }

并不会如愿打印出1~10,而是打印出10个10 因为for循环执行完毕后才会执行setTimeout回调函数,如果时间到了就执行ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

解决:
 for(var i = 0; i< 3; i++){   function foo(j){
        return function(){
            console.log(j);
        };
    }    var f = foo(i);
    setTimeout(f, 0);
}

这样打印出来就是1 2 3ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

2)用闭包来保存环境

闭包共享相同的函数定义,但是保存了不同的词法环境ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}var size12 = makeSizer(12);var size14 = makeSizer(14);var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

点击时文字会发生改变12、14、16ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

但是如果改变写法 :ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

function makeSizer(size) {
    document.body.style.fontSize = size + 'px';
}

这样写的话文字大小都是12,因为它们共享了同一个词法环境,第一个执行后,后面和前面的是公用一个词法环境ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

3)创建对象或类时使用闭包

在创建新的对象或者类时,方法通常应该关联于对象的原型,而不是定义到对象的构造器中。原因是这将导致每次构造器被调用时,方法都会被重新赋值一次(也就是,每个对象的创建)。ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

例如我们可以这样写:ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

function MyObject(name, message) {
  this.name = name.toString();  this.message = message.toString();
}
MyObject.prototype.getName = function() {
  return this.name;
};
MyObject.prototype.getMessage = function() {
  return this.message;
};

二、原型

1.png1.pngubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

相关推荐:ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

js闭包使用详解-js教程ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

具体介绍JavaScript闭包深入解析及代码实现方法ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

以上就是js 闭包与原型的应用代码详解的详细内容,更多请关注少儿编程网其它相关文章!ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

来源:php中文网ubB少儿编程网-Scratch_Python_教程_免费儿童编程学习平台


相关文章:

支持一下 ( )

js 闭包与原型的应用代码详解

      匿名评论
    • 评论
    人参与,条评论
    js 闭包与原型的应用代码详解

微信公众号

免费视频教程

先知道