JS高级04

最新推荐文章于 2026-06-24 10:45:09 发布
原创 最新推荐文章于 2026-06-24 10:45:09 发布 · 162 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#javascript
本文深入探讨JavaScript中的函数执行模式，包括普通函数、方法及构造函数调用，并介绍如何通过call、apply和bind改变函数上下文。此外，还讲解了ES6类的创建、方法添加及继承方式。

笔记目录

小概

本章学习内容：函数基本执行模式（普通函数调用，方法调用，构造函数调用） 了解函数/方法中的this指向；函数上下文调用模式（call()，apply()，bind()） 修改函数中的this指向；ES6类的介绍(类的创建，类添加方法，类的继承),super关键字的用法介绍。

1. 函数的基本执行模式

函数执行的三种方式：清楚函数中this的指向

  1. 普通函数调用
        //1.普通函数调用. 
        //this就指向window对象. 
        function test(){
            console.log('test函数');
            console.log(this);
        }
        //test(); //相当于是window.test();
  1. 作为方法调用
let obj = {
	name:'小斐',
	age:18,
	sayHi:function(){
	console.log('你好');
	console.log(this);
}
obj.sayHi();   //this指向调用者obj

谁调用这个方法/函数,那这个方法/函数中的this就是指向谁.

  1. 作为构造函数调用
        function Student(name,age){
            this.name = name;
            this.age = age;
            console.log(this);
        }

        let s2 = new Student('德华',21);  //Student

        Student('倩倩',23); //window.Student('倩倩',23);

不要管方法/函数是如何声明的，要看她是如何调用的,牢记谁调用这个方法/函数,这个函数/方法中的this就是谁.

2. 函数上下文调用模式

上述的三种执行方式是无法更改函数/方法中的this指向,所以需要使用到函数的第四种调用模式：函数上下文调用模式。

2.1 call()

语法：函数名。call(this的新指向，arg1,agr2…);

        let obj = {
            name: '广坤'
        }
        function getSum(num1,num2){
            console.log(num1+num2);
            console.log(this);
        }
        //getSum(10,20);
        getSum.call(obj,100,200);

2.2 apply()

语法：函数名.apply(this的新指向，数组或者伪数组)；apply方法只能传两个参数。

       function getSum(num1, num2) {
            console.log(num1 + num2);
            console.log(this);
        }
        //getSum(10,20);
        getSum.apply(obj,[30,40]); //依次的把数组的元素交给形参.

2.3 bind()

语法：函数名.bind(this的新指向[,arg1[,arg2…]])
注意：bind不会执行这个函数，而是返回一个this改变了而函数体一样的函数

       function getSum(num1, num2) {
            console.log(num1 + num2);
            console.log(this);
        }
        //getSum(10,20);
        let fn = getSum.bind(obj,10,20);//fn接收改变this指向的函数
        fn(100,300);//调用

2.4 应用场景

需求：查找数组中的最大值/最小值

	let arr = [1.,2,23,50,-10,];
	let max = Math.max.apple(Math,arr);//把arr的每一个元素依次的交给max函数

需求：把伪数组转成真数组

	let weiArr = {
		    0:'张三',
            1:'李四',
            2:'王五',
            3:'陈麻子',
            4:'狗蛋',
            5:'狗剩儿',
            length:6
	}
	    //2. push();
        // let arr = [];
        // arr.push.apply(arr,weiArr); //把weiArr的每一项依次的交给push.
        // console.log(arr);

        //3. concat();
        // let arr = [];
        // arr = arr.concat.apply(arr,weiArr); //把weiArr的每一项依次的交给concat.
        // console.log(arr);

        //4. slice();
        //如果weiArr可以调用数组的slice方法,那就会返回一个元素和weiArr一样的真数组,
        //let arr = weiArr.slice(0);//但是很遗憾,weiArr不能调用数组的slice方法,所以这里报错了. 
        //那怎么办? 借用
        // let arr = Array.prototype.slice.call(weiArr,0);
        // console.log(arr);

        //5.es6语法. 
        // let arr = Array.from(weiArr);
        // console.log(arr);

需求：对元素都是数组的伪数组进行排序

        let weiArr = {
            0: 1109,
            1: 110,
            2: 220,
            3: 215,
            4: 210,
            5: 500,
            6: 400,
            length: 7
        }
        //如果weiArr也能调用数组的sort方法,那就可以排序. 
        //但是他是伪数组,不能直接调用数组的sort方法. 
        Array.prototype.sort.call(weiArr,function(a,b){
            return a-b;
        });
        console.log(weiArr);

2.5 组合继承

        //组合继承. 

        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        //替换Person的原型
        Person.prototype = {
            constructor:Person,
            sayHi:function(){
                console.log('你好,你吃了吗?');
            }
        }
        //实例化一个人对象
        let wangjianlin = new Person('王健林',58);
        wangjianlin.house = {address:'东京',price:'1000000'};
        console.log(wangjianlin);

        //------------------------------------------------------------
        function Student(name,age,score){
           //借用构造函数继承 
           Person.call(this,name,age);

           this.score = score;
        }
        //替换原型继承
        Student.prototype = wangjianlin;

2.6 万能数据检测

万能数据类型检测

		console.log(Object.prototype.toString.call(123));//'[object Number]'
      	console.log(Object.prototype.toString.call('abc'));//'[object String]'

3. ES6 类

3.1 类的创建

es6之前没有类的概念

        class Student {
            constructor(name,age,score){
                this.name = name;
                this.age = age;
                this.score = score;
            }
        }

        //实例化一个对象
        let s1 = new Student('龙龙',18,100);
        console.log(s1);

        //再实例化一个对象
        let s2 = new Student('伟哥',20,99);
        console.log(s2);

        //思考:
        //es6中的类,本质就是es5中的构造函数.  
        console.log(typeof Student);//function
        console.log(s1.__proto__ === Student.prototype);//true
        console.log(s2.__proto__ === Student.prototype);//true
        console.log(Student.prototype.constructor === Student); //true

注意:
1.声明类的时候,类名后面不要加小括号.
2.声明类的时候,类名首字母大写,类名也是一个名词.
3.用new关键字去实例化类的对象,会自动的调用constructor构造函数.
4.如果你声明类的时候,没有写constructor构造函数,那系统会自动的给你生成一个constructor构造函数.

3.2 类中添加方法

        class Student {
            constructor(name,age,score){
                this.name = name;
                this.age = age;
                this.score = score;
            }
            study(kcName){
                console.log('我是学生,我的名字是'+this.name+',我在学习'+kcName);
            }
        }
        //往原型中添加一个方法
        // Student.prototype.eat = function(){
        //     console.log('吃饭');
        // }
        // console.dir(Student.prototype);

3.3 类的继承

       //创建一个学生类. 
        class Student {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            study(kcName) {
                console.log('我是学生,我的名字是' + this.name + ',我在学习' + kcName);
            }
        }
        //创建一个大学生类 继承自 学生类 
        class CollegeStudent extends Student{
        }

		//实例化大学生对象. 
        let cs1 = new CollegeStudent('龙龙',19);
        console.log(cs1);
        cs1.study('金瓶梅');

        //本质: 原型链继承
        console.log(cs1.__proto__ === CollegeStudent.prototype);//true
        console.log(cs1.__proto__.__proto__ === Student.prototype);//true

本质：原型链的继承

3.4 super关键字

super(); //调用父类的构造函数(构造器).
super.xx(); //调用父类的方法.

        //创建一个大学生类 继承自 学生类 
        class CollegeStudent extends Student{
            constructor(name,age,dx){
                //就是在子类的构造器中一定要调用父类的构造器.并且这句话一定要写在子类构造器的第一句.
                super(name,age);

                console.log(this === that);//true
                this.dx = dx;
            }
        }
        //实例化大学生对象. 
        let cs1 = new CollegeStudent('龙龙',19,'蒋毅');
        console.log(cs1);

如果子类constructor中需要新增属性，super（）一定要写在子类构造器的第一句.
子类需要使用父类的方法：super.方法名().
注意：先写类，再用类实例化对象（写在类后面，不然会报错）。

总结

关键字：call，apply，bind；改变this指向，不同的环境用对应的关键字，call（指向对象，形参…）和apply（指向对象，[数组/伪数组]）这两个修改this指向都会执行函数。bind则不会，但是bind会返回一个修改this指向后的函数，场景单击事件…
(子类)expends(父类) 类继承，super子类内部继承父类constructor/方法。

详解js中extend函数
热门推荐
sysuzhyupeng的博客
02-03 4万+
为了简化类的声明，可以把派生子类的整个过程包装在一个extend的函数，和其他语言中的extend关键字类似，基于一个给定的类结构创建一个新的类 function extend(subClass, superClass){ var F = function(){ }; F.prototype = superClass.prototype; subClas
js中extends使用和原理
sssssnmmm的博客
09-20 1136
开始先推荐一篇文章,将js的继承讲述的特别全面,我就是取里面的结论,方面日后查阅Javascript如何实现继承？
JS中的extend
erone的专栏
06-15 5199
有这样的调用关系，这是使用的代码$('#btn').staFilter({     selectEvent : function( startDate, endDate ){         sDate = startDate; eDate = endDate;     },     initEvent : function( startDate, endDate) {     sDat...
js中类的继承--extends
weixin_45705239的博客
04-16 1060
创建类继承，需要使用extends关键字。官网代码示例在Model的构造方法中我们看到了super()在 constructor 方法中调用，我们。继承对于代码可重用性很有用：在创建新类时现有类的属性和方法。
JS中的继承和Extend
江湖再见
02-05 3577
Extend // 例子：浅拷贝 var a = {}; var b = {c:1, d:2}; for(var i in b){ a[i] = b[i]; } // 封装，对引用类型（数组、对象）没有用 function extend(sub,sup){ for(var i in sup){ sub[i] = sup[i]; } } 继承 var People = fu
04【JavaScript高级】
YangS121jun的博客
08-09 227
JavaScript高级 1. JavaScript： 1. ECMAScript： 2. BOM： 3. DOM： 1. 事件 DOM简单学习：为了满足案例要求 * 功能：控制html文档的内容 * 获取页面标签(元素)对象：Element * document.getElementById("id值"):通过元素的id获取元素对象 * 操作Element对象： 1. 修改属性...
JavaScript高级第04天笔记
孙小圣的博客
06-21 250
JavaScript高级第04天笔记 1.正则表达式概述 1.1什么是正则表达式 正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。 正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。 其他语言也会使用正则表达式，本
JS04 - JS高级语法
qq_43350524的博客
04-02 837
JS04 - JS高级语法
04-JavaScript高级
m0_51219495的博客
12-21 253
学习目标: 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 掌握在 JavaScript 中使用正则表达式 typora-copy-images-to media JavaScript 高级 目标 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 掌握在 JavaScript 中使用正则表达式 案例演示 贪吃蛇 回顾 由于 JavaScript 高级还是针对 JavaScript 语言本身的一个进阶学习，所以在开始之前我们先对以前所学过的 J.
JavaScript高级04
qq_44502073的博客
08-31 159
JavaScript高级04 1.正则表达式概述 1.1什么是正则表达式 正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。 正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。 其他语言也会使用正则表达式，本阶段我们
js如何实现继承（常用）
moshangyanhua的博客
07-23 2986
1.使用对象冒充： 理解： 在本构造函数中将其他构造函数视为本类的一个属性，并执行，从而实现了对超类的拷贝 优点： 简单直接，思路清晰，可以实现多重继承，体现了类似Java等语言面向对象的原理 缺点： 由于将其他构造函数的属性和方法嵌套到本类来，难免会发生属性和方法冲突，由于程序是自上到下运行的，先定义的同名的属性和方法会被覆盖掉。 2.使用es6 class关键字实现 理解： 使用class...
Claude Code 从安装到调用的保姆级指南（MacOS）
m0_53581755的博客
06-18 124
本文详细介绍了在macOS上安装配置Claude Code的完整流程。主要内容包括：1）安装Node.js（推荐18+版本）；2）通过npm安装Claude Code；3）使用88api中转服务配置API连接（含获取API Key和两种配置方式）；4）VSCode插件的额外配置；5）常见问题排查方法（如连接失败的处理）。教程提供了从环境准备到实际使用的完整解决方案，特别针对国内用户无法直连的问题给出了中转服务配置方案，并附有详细的命令行操作指导和注意事项，帮助用户快速上手Claude Code。
Vue2 + flv.js 对接海康威视摄像头实现数据大屏实时视频监控（完整方案）
pony君的博客
06-18 481
本文介绍了在Vue2数据大屏中对接海康威视摄像头的完整方案，解决浏览器无法直接播放RTSP流的问题。通过对比HTTP-FLV、HLS、WebRTC等技术方案，最终采用HTTP-FLV为主+HLS为备选的策略，利用flv.js和hls.js实现低延迟视频监控。文章详细说明了整体架构设计、前端实现代码（包括分屏布局、播放器初始化等关键代码），并分享了实际项目中的技术选型经验和解决方案。该方案适用于工业MES系统、仓储管理等需要实时监控的场景，支持2x2/4x4分屏切换，已在淀粉厂MES系统中成功应用。
机场设备管理系统 - 项目完整文档
格子杰的博客
06-20 519
机场设备管理系统摘要 机场设备管理系统是一个专为机场设计的设备监控与管理平台，主要功能包括： 设备全生命周期管理：跟踪设备从入库、备机、安装使用到维修的全过程状态（使用中/备机/损坏/送修） 核心业务功能： 实时监控设备状态 故障设备快速更换（备机调配） CUSS自助值机机耗材管理 值机岛/登机口等站点配置 完整的变更历史追溯 技术架构： 采用Next.js框架构建 包含仪表盘、设备管理、站点管理等模块 使用TypeScript定义数据模型 提供CSV导入导出功能 支持PostgreSQL/MySQL数据库
MonkCode + Qwen3.7-Plus：国产AI编程的王炸组合 [1782102026834]
2408_89646393的博客
06-22 145
MonkCode + Qwen3.7-Plus是2026年中文开发者的最佳组合。免费、好用、支持国产。如果你还在为Cursor付费，试试这个组合。立即体验：https://monkeycode-ai.com/?
从爬虫业务视角对比 JavaScript 与 Python 语言特性
Z_suger7的博客
06-22 559
结合语言特性与实战效果，可明确两门语言的爬虫业务适配边界：Python适合静态页面采集、结构化数据抓取、工程化分布式爬虫、复杂反爬场景，凭借成熟生态降低开发和维护成本，是企业常规爬虫业务的首选；JavaScript（Node.js）适合动态渲染页面抓取、高并发批量采集、前端加密参数破解、轻量实时爬虫，凭借异步非阻塞特性实现高吞吐抓取。在实际业务中，主流方案为双语言结合：使用Python搭建爬虫调度、数据存储、反爬核心架构，使用Node.js处理动态页面渲染、高并发请求场景，最大化发挥两门语言的核心优势。
【高级】AccessGuard v1.2：状态管理类型设计 — TypeScript Zustand/Immer 类型化深度实战
我的博客
06-22 245
核心痛点: 在企业级 IAM 前端系统中，权限状态横跨 RBAC 角色检查、ABAC 策略评估、用户会话管理和审计追踪四大模块，传统 Redux 的手写 action type 枚举和 connect 高阶组件模式导致类型推导断裂——开发者需要在 action creator、reducer、selector、组件 props 四个位置重复声明同一份类型，一次权限模型升级往往引发数十处类型报错。
于SpringBoot2+vue2智能无人仓库管理
06-19 305
智能无人仓库管理系统，旨在通过信息化手段优化仓库的补货与取货流程。系统主要面向管理员和员工两类角色，提供了从补货提醒、补货申请到取货申请的一整套闭环管理功能。 核心业务：系统以“物品”为核心，管理员可以发布补货提醒，员工看到提醒后可提交补货申请；同时，员工也可以主动发起取货申请。所有申请均需管理员审核，确保了仓库操作的规范性和可追溯性。 管理目标：通过线上流程化管理，减少沟通成本，避免库存积压或短缺，提升仓库运营效率。
组件 = 模板 + 业务逻辑
linsk1998的博客
06-23 207
库内置了完整的元数据系统，你可以像 Java 那样自己写注解，给字段打标签，运行时直接读取配置。做动态表单、配置化表格、低代码页面的时候特别好用 —— 模型类写完，表单和表格直接照着元数据自动渲染，不用重复写配置。// 一行代码定义一个自定义注解@Model@Label("用户ID")@Required@Label("用户名")// 运行时直接读取所有字段元数据。
前端AI工具实战
最新发布
yanby921005的博客
06-24 195
实测案例： 我输入：“创建一个用户仪表盘，左侧导航菜单，右侧内容区分三部分：数据卡片、图表、任务列表。我（一名5年前端）在过去半年系统评测了30+款AI工具，淘汰了花哨但不实用的，留下了这10个真正能融入日常开发、提升效率的利器。每个工具我都附上了使用场景、优缺点、适合人群，以及官方优惠链接（部分有Affiliate，但我会客观评测）。AI解决的是效率问题，不是创造力问题。GitHub Copilot 生态成熟，VS Code深度集成 日常编码，团队协作 $10/月 ★★★★★。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值