JavaScript—面向对象、作用域

news2024/10/6 2:30:02

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>

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

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

相关文章

ElasticSearch基础知识汇总

文章目录 前言一、认识ElasticSearch1.正向索引和倒排索引2. MySql与ElasticSearc3.IK分词器 二、ES索引库操作1.mapping映射属性2.索引库的CRUD 三、ES文档库操作 前言 Elasticsearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎&#xff0c;基…

Kali Linux进行移动应用安全测试

使用Kali Linux进行移动应用安全测试是一项关键任务&#xff0c;可以帮助识别和修复移动应用中的安全漏洞。以下是一个基本的步骤指南&#xff0c;展示如何在Kali Linux中进行移动应用安全测试。 步骤&#xff1a; 准备环境&#xff1a; 确保 已经安装了Kali Linux&#xff0c…

开箱报告,Simulink Toolbox库模块使用指南(五)——S-Fuction模块(C MEX S-Function)

文章目录 前言 C MEX S-Function 算法原理 原始信号创建 编写S函数 仿真验证 Tips 分析和应用 总结 前言 见《开箱报告&#xff0c;Simulink Toolbox库模块使用指南&#xff08;一&#xff09;——powergui模块》 见《开箱报告&#xff0c;Simulink Toolbox库模块使用…

fastjson利用templatesImpl链

fastjson1.2.24 环境&#xff1a; pom.xml&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLoc…

在 Python 中逐步构建 DCF(贴现流)估值

Building A DCF Valuation in Python, Step by Step | by Roi Polanitzer | Medium 说明 这是一个真实的&#xff0c;以色列国土内的公司业务评估案例。在本文中&#xff0c;我将演示如何使用python中的DCF方法对以色列系统和应用程序公司进行业务评估。因为存在许多业务术语&a…

JVM 访问对象的两种方式

Java 程序会通过栈上的 reference 数据来操作堆上的具体对象。由于 reference 类型在《Java 虚拟机规范》里面只规定了它是一个指向对象的引用&#xff0c;并没有定义这个引用应该通过什么方式去定位、访问到堆中对象的具体位置&#xff0c;所以对象访问方式也是由虚拟机实现而…

音视频技术开发周刊 | 308

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 OpenAI首席科学家最新访谈&#xff1a;对模型创业两点建议、安全与对齐、Transformer够好吗&#xff1f; OpenAI首席科学家Ilya Sutskever最近和他的朋友Sven Strohband进…

算法设计 || 第6题:基于最小成本检索的分支界限算法求解15谜问题

用基于最小成本检索的分支界限算法求解15谜问题 要求利用成本估计函数C^(X)&#xff0c; C^(X)为节点x排列中不在其目标位置上的牌的总张数&#xff08;不包括空格牌&#xff09;。 现定义空格牌的上下左右四种活动&#xff0c; 按四种活动分别生成其状态空间树&#xff0c;…

JVM,JRE和JDK的区别

JVM&#xff0c;JRE和JDK的区别 JVM(Java Virtual Machine&#xff0c;Java虚拟机)JREJRE目录结构 JDK JVM(Java Virtual Machine&#xff0c;Java虚拟机) Java程序的跨平台特性主要是指字节码文件可以在任何具有Java虚拟机的计算机或者电子设备上运行&#xff0c;Java虚拟机中…

Docsify的评论系统gitalk配置过程

&#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是Zeeland&#xff0c;开源建设者与全栈领域优质创作者。&#x1f4dd; CSDN主页&#xff1a;Zeeland&#x1f525;&#x1f4e3; 我的博客&#xff1a;Zeeland&#x1f4da; Github主页: Undertone0809 (Zeeland)&…

[元带你学: eMMC协议 31] eMMC Context(上下文) ID 详解 | eMMC 并行数据标识与隔离详解

依JEDEC eMMC及经验辛苦整理,原创保护,禁止转载。 专栏 《元带你学:eMMC协议》 内容摘要 全文 5000 字, 主要内容 eMMC 为什么要引入 Context? Context 是什么? 如何使用Context 上下文? Context 上下文配置怎么做? 上下文 ID 应用局限 系统层和芯片组对 Contex…

IEC 60068 环境测试介绍及其标准下载

IEC 60068 环境测试介绍及其标准下载 IEC 60068 标准由国际电工委员会 (IEC) 发布&#xff0c;是用于电工产品环境测试的国际标准。 IEC 60068 系列包含有关标准、环境测试程序和测试严重性的基本信息。 IEC 60068 环境测试 制定这一系列标准是为了在特定产品类型&#xff08…

这是一条求助贴(postman测试的时候一直是404)

看到这个问题是404的时候总感觉不该求助大家&#xff0c;404多常见一看就是简单的路径问题&#xff0c;我的好像不是&#xff0c;我把我的问题奉上。 首先我先给出我的url http://10.3.22.195:8080/escloud/rest/escloud_contentws/permissionStatistics/jc-haojl/sz 这是我…

Midjourney学习(一)prompt的基础

prompt目录 sd和mj的比较prompt组成风格表现风格时代描述表情色彩情绪环境 sd和mj的比较 自从去年9月份开始&#xff0c;sd就变得非常或火&#xff0c;跟它一起的还有一个midjourney。 他们就像是程序界的两种模式&#xff0c;sd是开源的&#xff0c;有更多的可能性更可控。但是…

Maven之hibernate-validator 高版本问题

hibernate-validator 高版本问题 hibernate-validator 的高版本&#xff08;邮箱注解&#xff09;依赖于高版本的 el-api&#xff0c;tomcat 8 的 el-api 是 3.0&#xff0c;满足需要。但是 tomcat 7 的 el-api 只有 2.2&#xff0c;不满足其要求。 解决办法有 2 种&#xff…

【Go 基础篇】深入探索:Go语言中的切片遍历与注意事项

嗨&#xff0c;Go语言学习者&#xff01;在我们的编程旅程中&#xff0c;切片&#xff08;Slice&#xff09;是一个极其重要的工具。它可以帮助我们处理各种类型的数据&#xff0c;从而让我们的代码更加灵活和高效。本文将围绕Go语言中切片的遍历方法以及在遍历时需要注意的事项…

缺陷或负样本难以收集怎么办?使用生成式模型自动生成训练样本,image-to-image Stable diffusion

文章大纲 样本稀疏与对应的解决方案如何解决工业缺陷检测小样本问题参考1:AIDG(Artificial Intelligent Defect Generator)参考2:灵感来源 : Image-to-Image Diffusion Models参考文献与学习路径参考博文数据集算法缺陷检测库hugging face样本稀疏与对应的解决方案 1.数据层面…

网络服务第二次作业

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

java 桥接模式

桥接模式 桥接模式简介桥接模式的实现总结 桥接模式简介 桥接模式&#xff08;Bridge&#xff09;是将抽象部分与它的实现部分分离&#xff0c;使它们都可以独立地变化。它是一种对象结构型模式&#xff0c;又称为柄体(Handle and Body)模式或接口(Interfce)模式。 桥接模式基于…

C# VS调试技巧

一.按照条件调试步骤 ①在需要代码执行的行打断点 ②触发此断点&#xff0c;让代码执行到此处 ③鼠标滑至在断点处&#xff0c;点击设置 ④设置断点条件&#xff0c;如下图所示 二、多线程调试技巧 ①在需要代码执行的行打断点 ②触发此断点&#xff0c;让代码执行到此处…