JavaScript—面向对象、作用域

C#:从类继承

js:从对象继承

什么叫继承?

模板(类)

原型继承(实体)

有一个对象存在,构造函数设置原型为这个对象

创建出来的对象就继承与这个对象(从对象那里继承)

    <script type="text/javascript">       
        onload = function () {
           var Person= function(){
        this.say = function(){
                alert("你好");
        };
           };
           
           var p1= new Person();
           var p2 = new Person();
           
           p1.say();
        };
    </script>

此时p1、p2用的不是同一个say方法

方法与变量name、age等字段一样,占据了对象的内存

也就是说,每创建一个这样的函数,就会浪费一段这样的内存空间

什么是原型继承?

原型就是函数的prototype属性

   //使用继承后
   var Person = function(){
        
   };
   
   Person.prototype ={say:function(){
        alert("牛号");
   }};
   
   var p1 = new Person();
   var p2 = new Person();
   
   alert(p1.say===p2.say);   //打印true

js可以实现多继承

    <script type="text/javascript">       
        onload = function () {
           var inherite= function(name){
        this.name= name;
           };
           
           var o = {
                sayHello:function(){
                        alert("你好,我是"+ (this.name || "不存在"));
                }
           };
           
           o.sayHello();   //此时打印”你好,我是不存在“
           
           inherite.call(o,"赵晓虎");
           
           o.sayHello();  //此时打印”你好,我是赵晓虎“
        };
    </script>

原型链

如果需要原型,那么就一定要有函数

每一个对象有一个属性叫:_proto_

对象有原型,那么原型也是对象,原型也有原型

所有的函数是对象,继承自Function.prototype

Function.prototype是对象,继承自Object.prototype

Object.prototype是对象,继承自null

obj是对象,继承自Object.prototype

Function是对象,继承自Function.prototype

Function是函数,继承自Function.prototype


js成员的访问规则

O.方法( )

首先在o当前这个类型中寻找该成员的定义,如果存在该成员的定义,那么就直接使用该成员

如果该成员不在当前类型中,就访问其原型(原型链中的上一级)

以此类推,直到null位置

什么是js框架库?

使用js代码封装为一些文件,使用时只要引用进来即可

常见的js库

Prototype、YUI、Dojo、ExtJS、Jquery等


作用域

什么叫做作用域链?

多个函数嵌套,变量之间的作用域关系

作用域链(数组)

1、在script中表示第一个作用域链,我将其称为0链

2、凡是在该作用域链中的变量都是一个按照顺序存放的数组

3、如果有函数,表示在这个位置引出的第二个链,我记为1链

4、依此类推得到2链,3链等

在js中变量的访问规则是:

  1. 首先在当前作用域链中找到是否存在这个变量,如果存在直接使用这个变量
  2. 如果不存在,那么向上移级别(2链找1链)寻找该变量也是在上一个作用域链中寻找,那么找到就使用
  3. 如果没有就继续向上找,直到第0链,还没有就抛异常

如下面实例对应的作用域链

    <script type="text/javascript">
        var num = 234;
        var func = function () {
            var ff = function () {
                var num = 567;
                var f2 = function () {
                    num = 890;
                };
            };
            var num = 10;
            var f2 = function () {
                var num = "abc";
            };
        }
    </script>

在js中只支持函数作用域

    <script type="text/javascript">
        var f = function () {
            var f1 = function () {
                var num = 10;
                var f2 = function () {
                    alert(num);      //先找自己这一级有没有变量的声明,发现有,但是在它后面声明的,此时输出undefined
	       //num =20;   
                     var num = 20;
                    alert(num);      //输出20
                };
            };
        };
        f();
    </script>

变量会随时随地被覆盖

<script type="text/javascript">
        function a (){
                alert(a);  //此时打印的是这个函数
        }
        
        a();   
        var a = 10;
        alert(a);
</script>

常常会有些设计模式,变量容易被替换,我们的js代码就不安全。实际使用的时候,应该杜绝使用全局变量。

沙箱模式


闭包模拟对象

什么是闭包?

闭包像C#里面对象的私有变量。被包裹起来的一个东西,像墙一样。

函数就是闭包。函数作用域中的变量无法在外键访问,使用return将一个可以访问这个变量的对象返回到外界就形成一个闭包。

闭包用什么作用?

模拟对象

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                <title></title>
                <style type="text/css">
                        
                </style>
                <script type="text/javascript" src="F:\study\instance\计算机\03 BS\02 蒋坤JavaScript基础视频教程\003_DOM_BOM-蒋坤\J.js"></script>
                <script type="text/javascript">
                        var Person =function(name ,age,sex){
                                return {
                                        get_Name:function(){
                                                return name;
                                        },
                                        get_Age:function(){
                                                return age;
                                        },
                                        get_Sex:function(){
                                                return sex;
                                        }
                                }
                        };
                        
                        var p= Person("赵晓虎",19,"男");
                        alert(p.get_Name());
                        p.set_Name("TigerZhao");
                        alert(p.get_Name());
                </script>
        </head>
        <body>
                
        </body>
</html>

闭包的劣势与处理方法


四种调用模式—函数与方法

  • 函数形态
  • 方法形态(将函数赋值给某一个对象的成员,那么就称为方法,this指当前对象)
  • 构造器形态,就是构造函数
  • 上下文形态

函数具有全局性

函数调用

this表示全局对象,在web中即window

方法调用

this表示当前对象

<script type="text/javascript">
        var foo = function(){
                alert(this);
        };
        
        var o={toString:function(){return "我是o对象";}};
        
        o.foo=foo;
        
        foo();
</script>

构造器形态

this表示当前创建对象

构造器就是构造函数

构造函数的执行过程有哪些?

Var p = new Person();

1、new创建了对象,并开辟了空间

2、将对象的引用地址传递给函数,在函数中用this接收

3、构造方法执行结束,返回this

改变的东西有哪些?

构造函数改变了函数的返回值

如果函数的返回值是一个对象,那么就按照返回值来返回

如果返回值不是一个对象就忽略返回值,直接返回this

var Person= function(){
        this.age=19;
        this.name="赵晓虎";
        return "{}";   //打印赵晓虎,返回的是一个字符串
        return {};     //打印undefined,此时返回的是一个对象
};

var p = new Person();
alert(p.name);

上下文调用模式

想用什么模式就用什么模式。this可以根据参数自定义

语法:函数.apply(对象,[参数列表])

函数.call(对象,参数列表)

call和apply有什么不同吗?

apply参数要求是一个数组,call要求是一个参数列表

传null是函数调用模式,{ }是方法调用模式

var foo1= function(){
        alert(this);
        return a>b? a:b;
};

var num = foo1.apply({},[112,23]);
var num = foo1.apply(null,[112,23]);
    <script type="text/javascript">       
        onload = function () {
           var Person = function(name){
        this.name= name;
        this.say= function(){
                alert("你好,我是"+this.name);
        };
           };			
           
           var p = new Person("刘亮亮");
           var p1 = new Person("赵晓虎");
           p.say.call(p);    //此时输出刘亮亮
           p.say.call(p1);   //此时输出赵晓虎
        };
    </script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

作业人员护目镜佩戴自动识别

作业人员护目镜佩戴自动识别通过pythonyolo深度学习算法模型&#xff0c;作业人员护目镜佩戴自动识别利用布设摄像头并结合图像算法能够实时监测作业人员是否佩戴护目镜。一旦发现未佩戴的情况立即发出警告&#xff0c;并及时记录异常情况。在YOLOv1提出之前&#xff0c;R-CNN系…

【Python Flask+Nginx】实现HTTP、WS (两步实现,简单易懂)

目录 一、创建Flask应用 二、部署Nginx 2.1 下载Nginx 2.2 修改Nginx配置文件 2.3 启动Nginx 三、测试 一、创建Flask应用 首先我写了如下一个基于Flask的Demo&#xff0c;该Demo包含两个接口一个是HTTP接口&#xff08;http://127.0.0.1:5000&#xff09;&#xff0c…

数字孪生赋能工业制造,为制造业带来新机遇与挑战

数字孪生技术是利用模拟仿真技术将实体对象数字化的技术。它基于虚拟现实、人工智能和云计算等技术&#xff0c;能够创建与真实物体相同的数字模型&#xff0c;并通过实时监测和分析手段&#xff0c;为制造企业提供关于该物体的全面数据&#xff0c;从而优化产品开发和生产过程…

springboot服务端接口外网远程调试,并实现HTTP服务监听

文章目录 前言1. 本地环境搭建1.1 环境参数1.2 搭建springboot服务项目 2. 内网穿透2.1 安装配置cpolar内网穿透2.1.1 windows系统2.1.2 linux系统 2.2 创建隧道映射本地端口2.3 测试公网地址 3. 固定公网地址3.1 保留一个二级子域名3.2 配置二级子域名3.2 测试使用固定公网地址…

.NET 8 Preview 7 中的 ASP.NET Core 更新

作者&#xff1a;Daniel Roth 排版&#xff1a;Alan Wang .NET 8 Preview 7 现在已经发布&#xff0c;其中包括了对 ASP.NET Core 的许多重要更新。 以下是预览版本中新增功能的摘要&#xff1a; 服务器和中间件 防伪中间件 API 编写 最小 API 的防伪集成 Native AOT 请求委托…

NEOVIM学习笔记

GitHub - blogercn/nvim-config: A pretty epic NeoVim setup 一直使用vim&#xff0c;每次到了新公司都要配置半天&#xff0c;而且常常配置失败&#xff0c;很多插件过期不好用。偶然看到别人的NEO VIM&#xff0c;就试着用了一下&#xff0c;感觉还不错。 用来开发和阅读C代…

《Flink学习笔记》——第二章 Flink的安装和启动、以及应用开发和提交

​ 介绍Flink的安装、启动以及如何进行Flink程序的开发&#xff0c;如何运行部署Flink程序等 2.1 Flink的安装和启动 本地安装指的是单机模式 0、前期准备 java8或者java11&#xff08;官方推荐11&#xff09;下载Flink安装包 https://flink.apache.org/zh/downloads/hadoop&a…

网络服务第二次作业

[rootlocalhost ~]# vim /etc/httpd/conf.d/vhosts.conf <Virtualhost 192.168.101.200:80> #虚拟主机IP及端口 DocumentRoot /www/openlab #网页文件存放目录 ServerName www.openlab.com #服务器域名 </VirtualHost> …

SOPC之NIOS Ⅱ实现电机转速PID控制(调用中断函数)

通过FPGA开发板上的NIOS Ⅱ搭建电机控制的硬件平台&#xff0c;包括电机正反转、编码器的读取&#xff0c;再通过软件部分实现PID算法对电机速度进行控制&#xff0c;使其能够渐近设定的编码器目标值。 一、问题与改进 SOPC之NIOS Ⅱ实现电机转速PID控制_STATEABC的博客-CSDN…

《自动驾驶与机器人中的SLAM技术》之GNSS相关基础知识总结

简介 本篇基于对《自动驾驶与机器人中的SLAM技术》中的GNSS定位相关基础知识进行总结用于备忘 知识点整理 GNSS(全球卫星导航系统)定位原理 GNSS 通过测量自身与地球周围各卫星的距离来确定自身的位置 , 而与卫星的距离主要是通过测量时间间隔来确定的 GNSS与GPS的关系 GPS(…

row_number() over(partition by xx order by xx desc)

一、目的 主要用于根据某个字段对数据分组去重 二、demo 1. 有数据表 duplicate_test 如下 2. 使用 name 作为 key 对数据分组&#xff0c;并增加一列标识序号 idx&#xff08;根据 时间戳倒序标记序号&#xff09; select name,row_number() over(partition by name order…

SpringBoot整合 redis key (过期、新增、修改)的三种方式,看这篇就够了

文章目录 原理关于 *notify-keyspace-events*关于redis的消息主题&#xff08;Topic&#xff09;重写监听容器注册自定义解析常见整合问题鸣谢 文章主要描述了Springboot整合key变化的三种方式&#xff0c;同时列出了一些整合坑点与概念 原理 SpringBoot整合Redis key变化的原…

centos7删除乱码文件

centos7删除乱码文件1. 小白教程&#xff0c;一看就会&#xff0c;一做就成。 1.解释 当文件名为乱码的时候&#xff0c;无法通过键盘输入文件名&#xff0c;所以在终端下就不能直接利用rm&#xff0c;mv等命令管理文件了。 但是每个文件都有一个i节点号&#xff0c;可以通过…

Docker:Harbor 私有仓库迁移

Harbor 私有仓库迁移 一.私有仓库迁移的介绍 1.为何要对Harbor 私有仓库的迁移 &#xff08;1&#xff09;硬件升级或更换&#xff1a;如果源 Harbor 在旧的硬件设备上运行&#xff0c;并且计划将其迁移到新的硬件设备上&#xff0c;那么需要执行迁移操作。 &#xff08;2&…

macOS上开源免费的新闻阅读器SABnzbd

SABnzbd Mac版是一款运行在Mac平台上的开源新闻阅读器&#xff0c;这款阅读器界面简约、功效简单强大&#xff0c;使用SABnzbd时可以帮助使用Python语言编写&#xff0c;让用户使用usenet新闻组更便利&#xff0c;是你阅读新闻的好帮手&#xff01; SABnzbd具有以下主要特点&a…

【Python编程】将同一种图片分类到同一文件夹中

一、数据结构如下&#xff1a; 二、编程工具&#xff1a;Jupyter-Notebook 三、代码&#xff1a; import os import cv2 import shutilpath0os.getcwd()\\apple\\RGB path1os.getcwd()\\apple\\tof_confidence path2os.getcwd()\\apple\\tof_depth path3os.getcwd()\\apple\\…

【洛谷算法题】P1001-A+B Problem【入门1顺序结构】

&#x1f468;‍&#x1f4bb;博客主页&#xff1a;花无缺 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 花无缺 原创 收录于专栏 【洛谷算法题】 文章目录 【洛谷算法题】P1001-AB Problem【入门1顺序结构】&#x1f30f;题目背景&#x1f30f;题目描述…

统计学补充概念-13-逻辑回归

概念 逻辑回归&#xff08;Logistic Regression&#xff09;实际上是一种用于解决分类问题的统计学习方法&#xff0c;尽管其名称中带有"回归"一词&#xff0c;但它主要用于处理分类任务。逻辑回归用于预测一个事件发生的概率&#xff0c;并将其映射到一个特定的输出…

使用通信顺序进程(CSP)模型的 Go 语言通道

在并发编程中&#xff0c;许多编程语言采用共享内存/状态模型。然而&#xff0c;Go 通过实现 通信顺序进程&#xff08;CSP&#xff09;模型来区别于众多。在CSP中&#xff0c;程序由不共享状态的并行进程组成&#xff1b;相反&#xff0c;它们通过通道进行通信和同步操作。因此…

长胜证券:沪指探底回升涨0.47%,券商、酿酒板块拉升,传媒板块活跃

24日早盘&#xff0c;沪指盘中震动回落&#xff0c;接近午盘快速拉升走高&#xff1b;深成指、创业板指强势上扬&#xff1b;北向资金今天转向&#xff0c;早盘积极出场&#xff0c;半日净买入近30亿元。 到午间收盘&#xff0c;沪指涨0.47%报3092.88点&#xff0c;深成指涨1.1…