JavaScript基础函数+对象+继承

news2024/11/26 16:54:55

目录

1.创建函数

2.函数分类

2.1带参数函数

2.2匿名函数

2.3嵌套函数

 2.4立即执行函数

        ES6特有的箭头函数

2.5对象中的函数

3.this对象

4.有参构造函数创建对象

5.原型 prototype 

6.函数应用(继承)

6.1原型链继承

6.2构造继承

6.3组合继承(构造+原型链)


1.创建函数

1. 创建函数 第一种
    // var funA = new Function("alert('测试数据')");
    //调用函数
    // funA();
2.创建函数 方式二
    // function 函数名(形参1,......) {
    //     语句  return xxx;
    // }

2.函数分类

2.1带参数函数


    // function sum(num1, num2, num3) {
    //     return num1 + num2;
    // }
    // let res = sum(1, 2);

2.2匿名函数


    // var fun = function () {
    //     console.log("执行了函数")
    // }
    // fun();

2.3嵌套函数


    // 在函数内声明了一个函数就是嵌套函数
    // 嵌套函数只能在当前函数中访问
    function fu() {
        console.log("我是父函数")
        function zi() {
            console.log("我是儿子")
        }
        zi();
    }
    fu();


 2.4立即执行函数


    (function (str){
        console.log("这是一个立即执行的函数",str);
    })('这是一个参数');

        ES6特有的箭头函数

        (() => { // 这里是你的代码 })();

允许你创建一个新的作用域,以防止变量污染全局作用域。

立即执行函数的一个常见用途是在创建JavaScript库或模块时,以避免全局命名空间污染。例如,如果你正在编写一个库,并且不想将库的内部变量泄露到全局作用域,可以使用立即执行函数来包装你的代码。这样,你的内部变量就不会泄露到全局作用域中。

2.5对象中的函数

对象的属性可以是任何数据类型, 可以是一个函数(方法)

 // var person = {
    //     name:'zhangsan',
    //     age:20,
    //     sayHello:function () {
    //         console.log(this.name)
    //         console.log("这是person的方法:name属性:"+name)
    //     }
    // }

3.this对象

/**
     * this对象
     * 解析器在调用函数时每次都会向
     * 函数内部传递一个隐含的参数(this)
     * this指向的是一个对象,
     * 这个对象我们称为上下文对象
     * 根据调用者的不同,this会执行不同的对象
     *
     * 如果以函数方式 调用 this指向的是window
     * 如果是以方法的方式调用  this指向的是当前对象
     */

 // function sayHello(){
    //     console.log(this);
    //     console.log("这是person的方法:name属性:"+name)
    // }
    // sayHello(); >>>> this >window
 // var zhangsan = {
    //     name:'zhangsan',
    //     age:20,
    //     sayHello:sayHello
    // }
 // zhangsan.sayHello(); >>>> this >> 当前对象

4.有参构造函数创建对象

    function createPerson(name, age, sex) {
        let obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.sex = sex;
        obj.sayHello = function () {
            console.log(this);
            console.log("这是person的方法:name属性:" + name)
        }
        return obj;
    }
    let p1 = createPerson('zhangsan', 20, '男');
    let p2 = createPerson('lisi', 20, '男');
    let p3 = createPerson('wangwu', 22, '女');
    console.log(p1,p2,p3)
 function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.sayName = function () {
            console.log(this.name)
        }
    }
    // 创建Person对象
    let p1 = new Person('张三',20,'男');
    let p2 = new Person('李四',20,'男');
   //判断 对象时那个构造创建的
    console.log(p1 instanceof Person)

5.原型 prototype 

 原型 prototype,我们所创建的每一个实例,解析器都会向这个函数中添加一个prototype属性

    function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    let p1 = new Person('张三',20,'男');
    let p2 = new Person('李四',20,'男');
    Person.prototype.sayName = function () {
        console.log(this.name)
    }
    p1.sayName();
    p2.sayName();

hasOwnProperty 判断这个属性是否是 p2特有的;

__proto__.hasOwnProperty('xxx') 判断这个属性是否共有的

Person.prototype.xxx ='这是一个属性'
console.log(p2.xxx);//这是一个属性
console.log(p2.hasOwnProperty('xxx'))//判断这个属性是否是 p2特有的--false
console.log(p2.__proto__.hasOwnProperty('xxx'))//判断这个属性是否共有的 true

6.函数应用(继承)

子类中没有的属性和方法也可以通过继承父类来实现,通过继承,可以实现让父类的属性和方法在子类的实例中存在,也在子类的原型中存在。

6.1原型链继承

将子类的原型 指向父类实例 eg.SubType.prototype = new SupperType()

特点

1.原型链继承多个实例的引用类型属性指向相同
* 一个实例被修改了原型属性,另一个实例的原型属性也会被影响(假如子类有两个实例)
* 2.不能传递参数
当一个对象调用一个方法时,JavaScript会首先在对象的自身属性中查找该方法,如果找不到,则会沿着原型链向上查找。这个过程是静态的,即在创建对象时就已经确定了其原型链上的方法和属性。
* 3.继承单一

 

拓展:

将设置子类的原型构造函数为子类本身 eg.SubType.prototype.constructor = SubType;

6.2构造继承

// 在子类构造方法当中中 继承父类 调用call方法 继承所有的属性与方法
SupperType.call(this,name);

特点

1.只能继承父类实例的属性和方法,不能继承原型属性和方法
 2.无法实现构造函数的复用,每个子类都有父类的实例的函数副本,比较冗余。

6.3组合继承(构造+原型链)

 父类中的实例属性和方法 在子类的实例中存在,也在子类的原型中存在,因为是栈内存。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1325210.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Observability:捕获 Elastic Agent 和 Elasticsearch 之间的延迟

在现代 IT 基础设施的动态环境中,高效的数据收集和分析至关重要。 Elastic Agent 是 Elastic Stack 的关键组件,通过促进将数据无缝摄取到 Elasticsearch 中,在此过程中发挥着至关重要的作用。 然而,显着影响此过程整体有效性的关…

vue3使用mock模拟后端接口

安装mock axios yarn add mock yarn add axios 新建在src/mockdata/automenu.js 模拟后端的json数据格式 import Mock from mockjs Mock.mock(/menu,get,{status: 200,menuList: [{id : 1,iconCls: "fa fa-window",name: 系统管理,url: /},{id: 2,icon: icon-j…

智能优化算法应用:基于龙格-库塔算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于龙格-库塔算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于龙格-库塔算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.龙格-库塔算法4.实验参数设定5.算法结果…

CSS操纵元素的禁用和启用

通常表单控件都会有属性readonly、disabled对元素进行只读、禁用等操作。 而有时候我们想要div也达到类似效果,可以用CSS样式pointer-events: none进行控制。 科普知识 CSS样式的pointer-events: none用于控制一个元素能否响应鼠标操作。当该属性设置为none时&am…

【Docker-4】Docker 命令

1、镜像管理命令 docker images #查看本机镜像 [rootdocker-0001 ~]# docker imagesdocker search 镜像名称 #从官方仓库查找镜像 [rootdocker-0001 ~]# docker search busybox #需要联网,本次不用操作docker pull 镜像名称:标签 #下载镜像 [rootdocke…

MySQL基本操作 DDL DML DQL三大操作介绍

DDL 数据(结构)定义 创建表DML 数据操作 增删改DQL 查询语句 DDL 数据(结构)定义 创建表 创建 删除数据 注释 --空格内容 创建数据库 CREATE DATABASE [if not exists] 数据库名 [ CHARSET utf8]eg:CREATE DATABASE IF NOT EXISTS school CHARSET utf8如果对应school不存在,…

【GitHub精选项目】IP 地址转地理位置:ip2region 完全指南

前言 本文为大家带来的是 lionsoul2014 开发的 ip2region 项目,一种高效的离线 IP 地址定位库。ip2region 提供了10微秒级别的查询效率,支持多种主流编程语言,是一种理想的 IP 定位解决方案。 这个开源项目可以实现 IP 地址到地理位置的精确映…

2017年第六届数学建模国际赛小美赛A题飓风与全球变暖解题全过程文档及程序

2017年第六届数学建模国际赛小美赛 A题 飓风与全球变暖 原题再现: 飓风(也包括在西北太平洋被称为“台风”的风暴以及在印度洋和西南太平洋被称为“严重热带气旋”)具有极大的破坏性,往往造成数百人甚至数千人死亡。   许多气…

SVN搭建指导

环境 centos 7.9 SVN安装方式一:yum 1.1 http服务 至今还没有搞定网页版,网页版需要搭建apache http服务。遇到如下问题: centos - svn: Could not open the requested SVN filesystem - Stack Overflow 在试了加777权限,加a…

校园圈子交友系统,APP小程序H5,三端源码交付,支持二开!实名认证,大V认证,地图找伴,二手平台!

校园圈子交友系统,是属于自主定义开发的系统,内容有很多,先截取一些给大家看看,让大家更多的了解本系统,然后再做评价! 校园后端下载地址:校园圈子系统小程序,校园拼车,校…

Pycharm 关闭控制台多余窗口详解(console)

文章目录 1 问题描述2 解决办法2.1 步骤1:编辑配置2.2 步骤2:使用 Python 控制台运行(取消勾选)2.3 验证:再次运行,多余窗口消失 1 问题描述 2 解决办法 2.1 步骤1:编辑配置 菜单路径&#xf…

【bug日记】如何切换jdk版本,如何解决java和javac版本不一致

背景 今天在安装jenkins后,使用java运行war包的时候,提示jdk1.8版本太低,需要提高版本,所以就需要切换jdk版本 解决 在用户变量中,首先更改了JAVA_HOME的地址为17的目录,发现javac的版本改为17了&#x…

云原生扫盲篇

What 云原生加速了应用系统与基础设施资源之间的解耦,向下封装资源以便将复杂性下沉到基础设施层;向上支撑应用,让开发者更关注业务价值 云原生是一种构建和运行应用程序的方法,也是一套技术体系和方法论. Cloud 表示应用程序位于云中而不是传统的数据中心Native表示应用程序从…

函数帧栈的创建和销毁(一)

目录 什么是函数栈帧 理解函数栈帧能解决什么问题 函数栈帧的创建和销毁 什么是栈 认识相关寄存器和汇编指令 相关寄存器 相关汇编命令 esp和ebp 解析函数栈帧的创建和销毁 学前补充 函数的调用堆栈 什么是函数栈帧 我们在写C 语言代码的时候,经常会把…

ThinkPad E550c

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么?二、使用步骤 1.引入库2.读入数据总结 前言 提示:这里可以添加本文要记录的大概内容: 例如:…

java8实战 lambda表达式、函数式接口、方法引用双冒号(中)

前言 书接上文,上一篇博客讲到了lambda表达式的应用场景,本篇接着将java8实战第三章的总结。建议读者先看第一篇博客 其他函数式接口例子 上一篇有讲到Java API也有其他的函数式接口,书里也举了2个例子,一个是java.util.functi…

2-高可用-负载均衡、反向代理

负载均衡、反向代理 upstream server即上游服务器,指Nginx负载均衡到的处理业务的服务器,也可以称之为real server,即真实处理业务的服务器。 对于负载均衡我们要关心的几个方面如下: 上游服务器配置:使用upstream server配置上…

mysql 23day DDL常用约束,数据类型

目录 数据库的四种语言常用约束(DDL)创建格式PRIMARY KEY:主键约束FOREIGN KEY:外键约束主键外键 联合测试开始测试 NOT NULL:非空约束UNIQUE:唯一约束DEFAULT:默认值约束zerofill 零填充auto_i…

vcomp140.dll丢失怎么办,vcomp140.dll丢失解决方法详解

在我多年的电脑使用经历中,我曾经遇到过一个非常棘手的问题,那就是vcomp140.dll丢失。这个问题让我苦恼了很久,但最终我还是找到了解决方法。今天,我想和大家分享一下我的经历,以及vcomp140.dll是什么,它丢…

AI创作系统ChatGPT商业运营网站系统源码,支持AI绘画,GPT语音对话+DALL-E3文生图

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统,支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作Ch…