20230322----重返学习-闭包-this-JavaScript设计模式-面向对象-构造函数设计模式

最新推荐文章于 2024-09-17 13:42:29 发布
最新推荐文章于 2024-09-17 13:42:29 发布
阅读量137 收藏
点赞数
分类专栏： 重返学习 文章标签： javascript 学习 设计模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seetoyou/article/details/129722070
版权
文章详细探讨了JavaScript中的闭包概念，包括如何通过自执行函数和let关键字创建闭包以管理作用域。同时，文章阐述了this的用法，包括全局作用域、函数执行、事件绑定等情况下的行为。此外，还介绍了单例和工厂设计模式以及构造函数设计模式，展示了面向对象编程在JavaScript中的应用。
摘要由CSDN通过智能技术生成

day-033-thirty-three-20230322-闭包-this-JavaScript设计模式-面向对象-构造函数设计模式

闭包

闭包选项卡

  • 方法1: 又添加了一个自执行函数

    • 以前的i来自于全局作用域

    • 目前的i来自于自执行函数的作用域

      for (var i = 0; i < lis.length; i++) {
  // 之前i找到的上级作用域是window,现在我们手动增加一层作用域，用一个闭包的形式，里面把点击事件赋值
  //给了外面的元素，被占用，形成不销毁的作用域.n是私有变量，当点击页面上的元素的时候，就会找闭包作用域中的私有变量n

  (function (n) {
    lis[n].onclick = function () {
      change(n);
    };
  })(i);
}

      for (var i = 0; i < lis.length; i++) {
  lis[i].onclick = (function (n) {
    return function () {
      change(n);
    };
  })(i);
}
for (var i = 0; i < lis.length; i++) {
  //每次for循环，就给li绑定一个点击事件，并且点击的事件的值是return里面的小函数，形成了不销毁的作用域
  //当我们点击li的时候，里面的小函数就会执行，变量i就是自执行函数里面的私有变量
  lis[i].onclick = (function (i) {
    return function () {
      change(i);
    };
  })(i);
}

  • 方法2: 使用let产生块级作用域

    for (let i = 0; i < lis.length; i++) {
  lis[i].onclick = function () {
    change(i);
  };
}

<script>
<div class="main" id="main">
  <ul>
      <li class="current">音乐</li>
      <li>电视</li>
      <li>综艺</li>
  </ul>
  <div class="current">音乐内容</div>
  <div>电视内容</div>
  <div>综艺内容</div>
</div>
var lis = main.getElementsByTagName("li");
console.log(lis);

for ( var i = 0; i < lis.length; i++) {
  lis[i].onclick = function(){
    console.log(i);
  }
}
</script>
let产生作用域
  • 块级作用域：在es6语法中，用{} 括起来的,里面有const 或者let 都是块级作用域:
    • 在块级作用域外面访问不到里面的变量
    • 块级作用域也有作用域链（块级作用域也可以进行嵌套）
{
    console.log(a); //访问不到a，会报错，暂时性死区；
    let a=8;
    console.log(a); //隐藏暂时性死区报错后。访问得到a；
}
console.log(a); //隐藏暂时性死区报错后。访问不到a，报错a is not defined；

{
    let a=2;
    {
        let b=3;
        console.log(a); //访问得到a；
    }
}

console.log(a); //访问不到a，报错a is not defined；

this

  1. 全局作用域下

    • 非严格模式下 this—window

      console.log(this);

    • 严格模式下 this—window

      "use strict";
console.log(this);

  2. 普通函数执行

    • 非严格模式下 this—window

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

    • 严格模式下 this—undefined

      "use strict";
function show(){
  console.log(this)
}
show();

  3. 回调函数执行

    • 非严格模式下 this—window

      function show(f){
    f()
}
show(function(){console.log(this)});

      var arr=[1,2,3]
arr.map(function(){
    console.log(this)//arr
})

    • 严格模式下 this—undefined

      "use strict";
function show(f){
    f()
}
show(function(){console.log(this)});

      "use strict";
var arr=[1,2,3]
arr.map(function(){
    console.log(this)//arr
})

      • 两个特殊函数: setTimeout() setInterval() – 都指向window

        setTimeout(function(){
    console.log(this);
},1000)

        "use strict";
setTimeout(function(){
    console.log(this);
},1000)
        • 可以理解为，定时器的回调函数执行环境都是在经过一定时间后，在全局环境上执行。

  4. 自执行函数

    • 非严格模式下 this—window

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

console.log(this);

    • 严格模式下 this—undefined

      "use strict";
(function(){
   console.log(this);
})()

  5. 事件绑定 this指向的是当前绑定的DOM元素对象

    • 非严格模式下 this—当前绑定的DOM元素对象

      document.body.onclick=function(){
    console.log(this,1);//document.body
}

    • 严格模式下 this—当前绑定的DOM元素对象

      "use strict";
document.body.onclick=function(){
    console.log(this,2);//document.body
}

  6. 函数执行，前面有点号，点号前面的内容是谁，this就是谁。即函数属于某个对象的一个属性。

    • 非严格模式下 this—属于那个对象this就是谁

      var obj={
    name:"lili",
    fn:function(){
        console.log(this)
    }
}
obj.fn()
Array.prototype.show()//this-->Array.prototype

    • 严格模式下 this—属于那个对象this就是谁

      "use strict";
var obj={
    name:"lili",
    fn:function(){
        console.log(this)
    }
}
obj.fn()
Array.prototype.show()//this-->Array.prototype

  7. 箭头函数没有this，指向上级上下文中的this

      var obj={
    name:"lili",
    fn:()=>{
        console.log(this)
    }
}
obj.fn()//window

"use strict";
  var obj={
    name:"lili",
    fn:()=>{
        console.log(this)
    }
}
obj.fn()//window

  8. 构造函数中的this，指向实例对象

  9. call()、apply()、bind()可以修改this的指向

对象中函数this指向内存图

var num = 10;
var obj = { num: 20 };
obj.fn = (function (num) {
    this.num = num * 3;
    num++;
    return function (n) {
        this.num += n;
        num++;
        console.log(num);
    }
})(obj.num);
var fn = obj.fn;
fn(5);
obj.fn(10);
console.log(num, obj.num)

var name="珠峰培训";
function fn(){
    console.log(this.name)
}
var obj={
    name:"你好世界",
    fn:fn
}
obj.fn();//this--》obj  "你好世界"
fn();// this-->window  "珠峰培训"
(function(){//this-->window
    this.fn();// window.fn()-->"珠峰培训"
})();

let obj={
    name:"li",
    fn:(function(n){
        // 这里的this---window
        console.log(this);
        return function(){
            // 这里的this---obj
            console.log(this);
        }
    })(10),
}
obj.fn();//this-->obj

箭头函数不能用于构造函数

因为箭头函数没有原型对象prototype

示例

JavaScript设计模式

  • 单例设计模式: 单独的个体不会被相互干扰

    var name="lili";
var age=18;

//数据会相互影响
var name="Tom";
var age=20;

    • 简单单例设计模式—对象

      • 用一个对象把需要的方法或属性等数据包在一起

        // var name="lili";
// var age=18;

// var name="Tom";
// var age=20;
var obja={
    name:"lili",
    age:18
}
var objb={
    name:"Tom",
    age:20
}

    • 高级单例设计模式—闭包

      • 自执行函数返回一个对象，对象里面把需要的方法或属性等数据包在一起

        //高级单例设计模式---闭包
let lunbo=(function(){
  function show(){
    console.log("轮播")
  }

  return {
    show
  }
})()
lunbo.show();
let pubu=(function(){
  lunbo.show();
  function show(){
    console.log("瀑布")
  }

  return {
    show
  }
})()
pubu.show();

  • 工厂设计模式: 批量创建内容，封装函数返回一个新的对象，对象里面把把需要的方法或属性等数据包在一起

    function CreateObj(name,age){
  const res = {
    name:name,
    age:age
  }
  return res
}
let obja=CreateObj("lili",18)
let objb=CreateObj("Tom",20)

    function CreateObj(name,age){
    //....
  return {//es6 新增 key和value相同可以写一个
    name,
    age
  }
}
let obja=CreateObj("lili",18)
let objb=CreateObj("Tom",20)

  • 构造函数设计模式

  • 发布订阅设计模式

  • 观察者设计模式

  • 承诺者设计模式…

面向对象

  • 面向对象是一种编程思想，JavaScript就是基于这个思想构建出来的一门编程语言
    • 围绕对象，类(构造函数)，实例
    • 创建对象的方式
      1. 构造函数法 new Xxxx()
        • 所有的引用类型，基本上都可以用这种来创建
      2. 字面量法，就是构造函数法的简写
      3. Math对象比较特殊，不用new也不用字面量法。是一个内置对象
      • 能够new出来就是引用对象
        • 一些值类型如number在使用时进行了装箱
          • 在使用时把值变成对应的引用类型(包装对象)，但使用后又变成了值对象
        • 拆箱（隐式转换）
          • 引用类型在使用时会转化为基本数据类型进行运算，运算完成后，又变成了引用类型
            • let arr=[];console.log(arr+10,arr)//10 , []
  • 对象: 万物皆对象-----如: 引用类型+DOM+BOM+元素
    • 有些基本数据类型不是对象，但使用时会变成包装对象
  • 类/构造函数: 根据不同的特征进行划分
    • new的什么，就叫什么类
    • 类也是一个对象，类型是函数。
      • 也存在属性和方法，都以键值对的形式存在
        • 上面的方法叫做静态属性和静态方法
          • 必须用console.dir()或console.log([类名])详细输出类才会看到
            • console.dir()输出的是对象的键值对
    • 类也叫构造函数，基本上能用new调用就是构造函数
      • 它也是函数
      • 构造函数上的属性和方法就叫静态属性和静态方法
  • 实例对象: 类中的具体某个成员
    • 也叫实例对象，也就是用new调用构造函数后返回回来的对象
    • 同一个类的不同成员，每个实例对象之间
      • 具有不同的属性和方法（私有属性和公有方法），
      • 相同属性和相同方法（公有属性和公有方法）
        • 公有属性或方法的一般都放在[[Prototype]]上

函数对象的画图

  • 内部的内容
    • 作用域
    • 函数体字符串
    • 键值对
  • 在堆内存上

使用静态属性和方法

  • 使用静态属性和方法

    • 只能在构造函数/类上使用

      //如何使用静态属性和方法 : 只能类使用
// isArray静态方法---》判断是不是数组 是 true  不是 false
console.dir(Array);
console.log(Array.isArray([11]));

  • 使用私有属性、私有方法、公有属性和公有方法

    • 在实例上使用

      // 私有有属性和方法  公有属性和方法：实例
let arr = [1, 2, 3];
console.log(arr);
console.log(arr.length);
arr.push(10);
console.log(arr);

JavaScript内置类

  • JavaScript中的内置类就是在JavaScript里一开始就存在的类，不用声明或创建就能用的类
    • 基本上每一个数据类型值都有一个自己所属的内置类
      • Number类(每一个数字都是他的实例)、String类、Boolean类、Symbol类、BigInt类、Object类、Array类、RegExp类、Date类、Error类、Function类…
    • 每一个元素标签都有一个自己所属的内置类
console.dir(document.createElement('div'))
//HTMLDivElement -> HTMLElement- -> Element -> Node -> EventTarget -> Object-->null
console.dir(document.createElement('p'))
//HTMLParagraphElement -> HTMLElement- -> Element -> Node -> EventTarget -> Object-->null

console.dir(window)
//Window -> Window --> WindowProperties -> EventTarget -> Object-->null

构造函数设计模式

  • 构造函数设计模式
    • 普通函数执行，前面加上new就是构造函数设计模式，就是构造函数设计模式
      • 规范一般要求首字母大写
        • 小写也不报错，但规范最好要遵守
      • 执行步骤
        • 创建一个EC(function)函数执行上下文
          • 函数执行上下文
    • 构造函数执行和普通函数执行有四大区别

函数没小括号

  • 以普通函数方式执行，就是函数前面没new就直接调用函数了
    • 如果函数后面不接小括号，函数直接就是不执行，返回的是函数本身
  • 以构造函数方式执行，就是函数前面有new再调用函数
    • new后接构造函数名，构造函数后面可以有小括号也可以没有小括号
      • 有小括号，构造函数调用时有入参
        • 有小括号时，优先级为18
      • 没有小括号，函数依旧会执行，但是相当于不传递函数的new模式调用
        • 构造函数没小括号，虽然也会执行，但优先级为17
function Fn(x, y) {
    let sum = 10;
    this.total = x + y;             
    this.say = function () {
        console.log(`我计算的和是:${this.total}`);
    };
    // return {name:"lili"};
}
let res = Fn(10, 20); //以普通函数方式执行。有小括号，正常执行
let res1= Fn;//以普通函数方式执行。没有小括号，函数不执行
let f1 = new Fn(10, 20); //以构造函数方式执行。有小括号，有入参，传递参数 。 优先级18
let f3 = new Fn(); //以构造函数方式执行。有小括号，没有入参，不传递参数。  优先级18 
let f2 = new Fn;//以构造函数方式执行。没有小括号，不传递参数。  优先级17
  • 函数后面有小括号，优先级为18。
function Fn(x, y) {
    let sum = 10;
    this.total = x + y;             
    this.say = function () {
        console.log(`我计算的和是:${this.total}`);
    };
    // return {name:"lili"};
}
let res = Fn(10, 20); //普通函数执行
let f1 = new Fn(10, 20); //构造函数执行
  • 同一构造函数，多次调用每次返回的实例一般都不一样
function Fn(x, y) {
    let sum = 10;
    this.total = x + y;             
    this.say = function () {
        console.log(`我计算的和是:${this.total}`);
    };
    // return {name:"lili"};
}
let res = Fn(10, 20); //普通函数执行

let f1 = new Fn(10, 20); //构造函数执行  传递参数  优先级18
let f2 = new Fn;//函数执行 不传递参数  优先级17

console.log(f1);//实例
console.log(f2);//实例
  • 构造函数里返回的对象，里面的数据要在this上创建键值对
    • 返回出去后才能在结果对象中通过对象中括号语法或点语法访问得到
function Fn(x, y) {
    let sum = 10;
    this.total = x + y;             
    this.say = function () {
        console.log(`我计算的和是:${this.total}`);
    };
    // return {name:"lili"};
}
let f1 = new Fn(10, 20); //构造函数执行  传递参数  优先级18

console.log(f1);//实例

console.log(f1.sum); //undefined
console.log(f1.total); //30
  • 在构造函数内部新生成函数，绑定到this上时，反而返回出去，就算代码一样，所指向的内存地址也是不同的，是两个不同的函数，只是函数内部的代码运行逻辑一样而已
function Fn(x, y) {
    let sum = 10;
    this.total = x + y;             
    this.say = function () {
        console.log(`我计算的和是:${this.total}`);
    };
    // return {name:"lili"};
}
let f1 = new Fn(10, 20); //构造函数执行

console.log(f1);//实例
console.log(f1.say===f2.say);//false

进阶参考

  1. babel- 将ES6转成ES5
方朝端
关注
专栏目录
你不知道的javascript设计模式（三）----闭包
反手一个bug的博客
03-15 223
文章目录前言正文封装变量函数作用域利用闭包封装工具函数延续局部变量的寿命小节 前言         前面我们学习了javascript语言的多态，封装以及基于原型编程，在我们介入到设计模式的真正学习中，我们将进一步学习js中的闭包和高阶函数，因为这些在后面设计模式的实现中占到了很重要的作用，这一章我们将先学习闭包的相关知识 正文         相信
读书笔记-你不知道的JavaScript(上)
weixin_30784501的博客
06-06 75
本文首发在我的个人博客：http://muyunyun.cn/ 《你不知道的JavaScript》系列丛书给出了很多颠覆以往对JavaScript认知的点, 读完上卷，受益匪浅，于是对其精华的知识点进行了梳理。 什么是作用域 作用域是一套规则，用于确定在何处以及如何查找变量。 编译原理 JavaScript是一门编译语言。在传统编译语言的流程中，程序中一段源代码在执行之前会经历三个步骤，统称为...
读书笔记 - 你不知道的 JavaScript(上)
weixin_34268843的博客
06-06 82
本文首发在我的个人博客：muyunyun.cn/ 《你不知道的JavaScript》系列丛书给出了很多颠覆以往对JavaScript认知的点, 读完上卷，受益匪浅，于是对其精华的知识点进行了梳理。 什么是作用域 作用域是一套规则，用于确定在何处以及如何查找变量。 编译原理 JavaScript是一门编译语言。在传统编译语言的流程中，程序中一段源代码在执行之前会经历三个步骤，统称为“编译”。...
JavaScript ——闭包，this
CandiceYu的博客
06-25 565
关于this对象 this对象是在运行时基于函数的执行环境绑定的；全局函数中，this等于window，而当函数的执行环境具有全局性，this对象通常指向window。 var name = "The window"; var object = { name:"My Object", getNameFun:function(){ return function(){ return t...
包含javascript的基础语法，面向对象的实现和设计模式实现-javascript.zip
01-29
这个压缩包“包含javascript的基础语法，面向对象的实现和设计模式实现-javascript.zip”显然是一份关于JavaScript学习资源，特别是针对其基础、面向对象编程以及设计模式的应用。 **JavaScript基础语法** ...
Javascript-Interview-Preparation:此存储库包含 javascript 面试准备问题和解决方案
07-24
- JavaScript中的对象都有一个`__proto__`属性，指向创建该对象的构造函数的原型对象。 - 原型链是通过`__proto__`属性连接起来的对象链，用于实现继承。 - ES6引入的类和`class`关键字，实际上是对原型继承的一...
OOP-JavaScript
05-07
在JavaScript中，OOP主要依赖于构造函数、原型链和闭包等核心概念。Traversy Media的OOP速成课程是学习这一主题的绝佳资源。 1. 构造函数： 在JavaScript中，构造函数用于创建特定类型的对象。它们通常以大写字母...
javascript-weird-parts:了解JavaScript的怪异部分
04-29
- **构造函数、prototype 和 new 关键字**：构造函数用于创建新对象，`new`关键字用于调用构造函数并创建实例，同时设置实例的`__proto__`指向构造函数的`prototype`。 - **Object.create()**：另一种实现继承的...
You-Dont-Know-JS：有关JavaScript的丛书。 @YDKJS在推特上
02-03
《You-Dont-Know-JS》是一套专为JavaScript开发者设计的深度学习系列书籍，它在推特上广受欢迎，并以其深入浅出的讲解方式深受程序员喜爱。这套书旨在帮助读者深入了解JavaScript的核心概念，以及其背后的运行机制，...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 914
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 662
【代码】【JavaScript】LeetCode：707设计链表。
记录开发一个英语听力训练网站
业余程序员Blue的博客
09-14 708
目前只导入了雅思历年真题的听力音频，作为我日常练习英语听力的素材足够了。网站的主要功能其实就是英语句子精听，核心目的就是反复听每一句话，直到听懂为止，我觉得听力训练也没有太多技巧可言，就是老老实实地坚持去听，所谓网上经常说的“磨耳朵”吧。基于此，听力页面主要功能有：播放/暂停、上一句/下一句、播放次数选择、播放倍速选择、字体大小选择、是否显示原文、是否显示译文、是否自动播放下一句。而这些功能，基本上都是页面js操作。
使用 uni-app 开发微信小程序的详细指南
2301_79685859的博客
09-16 793
uni-app是一个使用 Vue.js 框架开发跨平台应用的前端框架。开发者通过编写一套代码，可以生成多端应用，包括 H5、iOS、Android、微信小程序、支付宝小程序、字节跳动小程序等。
前端vue3打印，多页打印，不使用插件（工作中让我写一个打印功能）
m0_51798113的博客
09-17 548
getTableData().tableData，其实就是去后端获取参数去了，因为这是公司的前端框架，基于vxe的，包装的方法，获取了一个表格信息，相当于获取参数。说下总体思路，创建一个组件，里面放多个span字段，然后根据父组件传入的参数，生成子组件，最好我们打印子组件的信息即可。这里也很关键，中间我遇到一个问题，那就是经常第一次点击按钮，dom元素没有加载完，就弹出打印框了，所以我加了一个异步事件，还有记得把抽屉关了。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 581
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
基于python+django+vue的旅游网站系统
最新发布
计算机学姐的博客
09-17 1713
【2025最新】基于协同过滤+python+django+vue+MySQL的旅游网站系统，前后端分离。
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 329
动态在本地引入图片
JS的输出语句
J3259392566的博客
09-13 302
js中严格区分大小写。
Objective-C入门指南：面向对象编程基础
要深入学习Objective-C，除了本primer外，还可以参考《Objective-C编程语言》官方文档，以及《Cocoa Fundamentals Guide》来了解Cocoa框架和设计模式。这些资源将帮助开发者构建扎实的Objective-C基础，从而更好地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值