1-1、作用域深入和面向对象

课时1：预解释

JS中的数据类型

number、string、 boolean、null、undefined

JS中引用数据类型

object: {}、[]、/^$/、Date 
Function

var num=12;
var obj={name:'白鸟齐鸣',age:10};
function fn(){
console.log('勿忘初心方得始终！')
}console.log(fn);//把整个函数定义部分（函数本身）在控制台输出
console.log(fn());//把当前函数返回的结果(return后面写的是啥，返回值就是啥，如果没有return，默认返回值是undefined);

window全局作用域：

1、当浏览器加载HTML页面的时候，首先会提供一个全局JS代码执行的环境–>全局作用域(global / window)

2、预解释（变量提升）

在当前的作用域中，JS代码执行之前，浏览器首先会默认的把所有带var 、function的进行提前的声明或者定义

1)理解声明和定义

var num=12;

声明(declare)：var num;->告诉浏览器在全局作用域中有一个num的变量了，如果一个变量只是声明了但是没有赋值，默认的值是undefined

定义(defined)：num=12; ->给我们的变量进行赋值

2)对于带var和function关键字的在预解释的时候操作还是不一样的

var -> 在预解释的时候只是提前的声明

function -> 在预解释的时候提前的声明+定义都完成了

3)预解释只发生在当前的作用域下，例如：开始只对window下的进行预解释，只有函数执行的时候才会对函中的进行预解释

console.log(num);//undefined
var num=12;
console.log(num);//12var obj={name:'白鸟齐鸣',age:100
}fn(100,200);//可以在上面执行，因为在预解释的时候声明+定义已经完成了
function fn(num1,num2){var total=num1+num2;console.log(total);
}

3、JS中内存的分类

栈内存：用来提供一个供JS代码执行的环境 –> 作用域（全局作用域、私有作用域）

堆内存：用来存储引用数据类型的值 -> 对象存储的是属性名和属性值，函数存储的是代码字符串…

课时2： 作用域链

1、如何区分私有变量和全局变量？

1) 在全局作用域下声明（预解释的时候）的变量是全局变量 
2) 在“私有作用域中声明的变量”和“函数的形参”都是私有变量； 
在私有作用域中，我们代码执行的时候遇到了一个变量，首先我们需要确定它是否为私有的变量，如果是私有的变量，那么和外面的任何东西都没有关系；如果不是私有，则往当前作用域的上级作用域进行查找，如果上级作用域也没有则继续查找，一直找到window为止……作用域链

2、当函数执行的时候（直接目的：让函数体中的代码执行），首先会形成一个私有的作用域，然后按照如下的步骤执行

1）如果有形参，先给形参赋值 
2）进行私有作用域中的预解释 
3）私有作用中的代码从上到下执行 
…… 
函数形成一个新的私有作用域保护了里面的私有变量不受外界的干扰（外面修改不了私有的，私有的也修改不了外面的）–>闭包

console.log(total);//undefined
var total=0;
function fn(num1,num2){console.log(total); //undefinedvar total=num1+num2;console.log(total);//300
}
fn(100,200);
console.log(total);//0

console.log(total);//undefined
var total=0;
function fn(num1,num2){console.log(total); //total不是私有的，找全局下的total，也就是在这里出现的所有的total其实应该都是全局->0total=num1+num2; //全局的total=300console.log(total);//300
}
fn(100,200);
console.log(total);//300

课时3：全局变量的细节问题

在全局作用域中，带var 和不带var的关系？ 
区别：带var的可以进行预解释，所以在赋值的前面执行不会报错；不带var的是不能进行预解释的，在前面执行会报错：

console.log(num);//undefined
var num=12;
console.log(num2);//报错;num2 is not defined，不执行下面
num2=13;
console.log(num2);

关系：num2=12 –>相当于给window增加了一个叫做num2的属性名，属性值是12 
var num=12;–>首先它相当于给全局作用域增加了一个全局变量num，但是不仅如此，它也相当于给window增加了一个属性名num2，属性值是12

console.log(num);//undefined
var num=12;
console.log(num);//12
num2=13;
console.log(num2);//13-->window.num2
第一种：
var total=0;
function fn(){console.log(total);//undefinedvar total=100;
}
fn()；
console.log(total);//0

第二种：
var total=0;
function fn(){console.log(total);//0total=100;
}
fn()；
console.log(total);//100

第三种：
私有作用域中出现了一个变量不是私有的，则向上级作用域进行查找，上级没有则继续向上查找，一直找到window为止，如果window下也没有呢？
我们是获取值：console.log(total);-->报错
我们是设置值： total=100;->相当于给window增加了一个属性名total,属性值100
function fn(){//console.log(total);//total is not definedtotal=100;
}
fn()；
console.log(total);//100；window.total=100;

JS中如果在不进行任何特殊处理的情况下，上面的代码报错，下面的代码都不在执行了

课时4：预解释是一种毫无节操的机制

预解释是毫无节操的一种机制 
自从学了预解释，从此节操是路人 
in:”num” in window 判断num是否为window这个对象的一个属性，是的话返回true，不是的话返回false

1、预解释的时候不管你的条件是否成立，都要把带var的进行提前声明window的预解释：var num;-->window.num;if(!('num' in window)){//'num' in window ->true->取反是false
var num=12;
}
console.log(num);//undefined2、预解释的时候只预解释"="左边的，右边的是值，不参与预解释
匿名函数之函数表达式：把函数定义的部分当做一个值赋值给我们的变量/元素的某一个事件
window下的预解释：var fn;fn()；//fn is not a function
var fn=function (){console.log('OK');}fn();//OK;函数声明+定义完成
function fn(){console.log('OK')；
}
fn();//OK3、自治行函数定义的那个function在全局作用域下不进行预解释，当代码执行到这个位置的时候定义和执行一起完成了
自执行函数：定义和执行一起完成了(function (num){})(100);
~function (num){}(100);
+function (num){}(100);
-function (num){}(100);
！function (num){}(100);4、函数体中return下面的代码虽然不在执行了，但是需要进行预解释;return后面跟着的都是我们返回的值，所以不进行预解释function fn(){
//预解释：var num;
console.log(num);//undefinedreturn function (){
}var num=100;
};
fn();5、如果在预解释的时候，如果名字已经声明过了，不需要从新的声明，但是需要新的赋值；
在JS中如果变量的名字和函数的名字重复了，也算冲突
预解释：var fn; window.fn; fn=xxxfff000 window.fn=xxxfff000var fn=13;
function fn(){
console.log('OK');
}window预解释：
声明+定义 fn=xxxfff111
声明 var fn;(不需要重新声明)
声明(不重复进行)+定义 fn=xxxfff222
-> fn=xxxfff222
fn();//2
function fn(){console.log(1);}
fn();//2
var fn=10;//fn=10
fn();//fn() ERROR:fn is not a function,以下不执行
function fn(){cosole.log(2);}
fn();

课时5：如何查找上级作用域

如何查找当前作用域的上一级作用域？ 
看当前函数是在哪个作用域下定义的，那么它的上级作用域就是谁 –> 和函数在哪执行的没有任何的关系

var num=12;
function fn(){var num=120;return function (){console.log(num);//120
  }
}
var f=fn();
f()~function (){var num=1200;f();//120
}()

课时6：关于内存释放和作用域销毁的研究

堆内存 
对象数据类型或者函数数据类型在定义的时候首先会开辟一个堆内存，堆内存有一个引用的地址，如果外面有变量等知道了这个地址，我们就说这个内存被占用了，就不能销毁了

var obj1={name:'张三'}；
var obj2=obj1;我们想要让堆内存释放/销毁，只需要把所有引用它的变量值赋值为null即可，如果当前的堆内存没有任何东西被占用了，那么浏览器会在空闲的时候把它销毁....
obj1=null;
obj2=null;

栈内存

1）全局作用 （栈内存） 
只有当页面关闭的时候全局作用域才会销毁

2）私有作用域(只有函数执行会产生私有作用域) （堆内存） 
一般情况下，函数执行会形成一个新的私有作用域，当私有作用域中的代码执行完成后，我们当前作用域都会主动的进行释放和销毁

但是还是存在特殊情况的：

当前私有作用域中的部分内存被作用域以外的东西占用了，那么当前的这个作用域就不能销毁了 
a、函数执行返回了一个引用数据类型的值，并且在函数的外面被一个其他的东西给接收了，这种情况下一般形成的私有作用域都不会销毁

function fn(){
var num=100;
return function(){ 
}
}
var f=fn();
解析： 返回的是一个函数 为引用数据类型
 

b、在一个私有的作用域中，给DOM元素的事件绑定方法，一般情况下我们的私有作用域都不销毁

var oDiv=document.getElementById('div1')；
~function (){oDiv.onclick=function (){}
}()//当前自执行函数也不销毁

c、下述情况属于不立即销毁->fn返回的函数没有被其他的东西占用，但是还需要执行一次呢，所以暂时不销毁，当返回的值执行完毕后，浏览器会在空闲的时候销毁了–>’不立即销毁’

function fn(){
var num=100;
return function (){}
}
fn()(); //首先执行fn，返回一个小函数对应的内存地址，然后紧接着让返回的小函数在执行

课时7：作用域练习题

++i和i++ 
都是自身累加1，在和其他的值进行运算的时候是有区别的 
i++:先拿i的值进行运算，运算完成本身在加1 
++i：先本身累加1，然后拿累加完成的结果去运算

var i=5;//console.log(1+i++)//6 i=6//console.log(1+(++i))//i=6 7console.log(2+(i++)+(++i)+(++i)+(i++));//30cosnle.log(i);//9
function fn(){var i=10;return function (n){console.log(n+(++i));}
}
var f=fn();
f(10);//21  i=11
f(20);//32  i=11+1
fn()(10)；//21  i=11  新作用域
fn()(20);//31   i=11  新作用域
function fn(i){return function (n){console.log(n+i++)
}
}
var f=fn(13);
f(12)；//25
f(14);//28
fn(15)(12);//27
fn(16)(13)；//29

课时8：this关键字

我们在JS中主要研究的都是函数中的this 
JS中的this代表的是当前行为执行的主体：JS中的context代表的是当前行为执行的环境(区域):

this是谁和函数在哪定义的和在哪执行的都没有任何关系：如何的区分this呢？

1、函数执行，首先看函数名前面是否有” . “，有的话” . “前面是谁this就是谁；没有的话this就是window

function fn(){
console.log(this);
}
var obj={fn:fn};
fn();//this-->window
obj.fn()//this-->obj
function sum(){//this-->windowfn();//this-->window
}
sum();var oo={sum:function (){//this-->oofn()；//this-->window
  }
}
oo.sum();

2、 自执行函数中的this永远是window 
3、给元素的某一个事件绑定方法，当事件触发的时候，执行对应的方法，方法中的this是当前的元素

function fn(){console.log(this);
}
var obj={fn:fn};
fn();//this-->window
obj.fn();//this-->obj
document.getElementById('div1').οnclick=fn;//fn 中的this是div1

document.getElementById('div1').οnclick=function (){//this-->#div1fn();// this-->window
};

4、 在构造函数模式中，类中（函数体中）出现的this.xxx=xxx中的this是当前类的一个实例

课时9 综合练习题

var num=20; //20*3=60var obj={num:30,fn:(function (num){this.num*=3;//num=60num+=15;    //85var num=45;return function (){this.num*=4;//240num+=20;   console.log(num); }})(num)// --> 把全局变量num的值20赋值给了自执行函数的形参，而不是obj下的30，如果想是obj下的30，我们需要写obj.num
};var fn=obj.fn;fn();//65obj.fn();//65+20=85console.log(window.num,obj.num);//240 120

 

转载于:https://www.cnblogs.com/hongzhuang/p/7515915.html

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

JWT协议学习笔记

JWT协议学习笔记

2019独角兽企业重金招聘Python工程师标准>>> 官方 https://jwt.io 英文原版 https://www.ietf.org/rfc/rfc7519.txt 或 https://tools.ietf.org/html/rfc7519 中文翻译 https://www.jianshu.com/p/10f5161dd9df 1. 概述 JSON Web Token（JWT）是…
阅读更多...
验证Oracle收集统计信息参数granularity数据分析的力度

验证Oracle收集统计信息参数granularity数据分析的力度

最近在学习Oracle的统计信息这一块，收集统计信息的方法如下： DBMS_STATS.GATHER_TABLE_STATS (ownname VARCHAR2, ---所有者名字tabname VARCHAR2, ---表名partname VARCHAR2 DEFAULT NULL, ---要分析的分区名estimate_percent NUMBER DEFAULT NULL, …
阅读更多...
Python之NumPy（axis=0 与axis=1）区分

Python之NumPy（axis=0 与axis=1）区分

Python之NumPy（axis0 与axis1）区分 转载于:https://www.cnblogs.com/greatljg/p/10802392.html
阅读更多...
20165320 第九周学习总结

20165320 第九周学习总结

主要内容： 1.URL类 URL类是java.net包中的一个重要的类，使用URL创建对象的应用程序称为客户端程序。URL 的构造方法：try { URL url new URL ("http://www.google.com"); } catch (MalformedURLException e) {System.out.println(&…
阅读更多...
Python 函数的执行流程-函数递归-匿名函数-生成器

Python 函数的执行流程-函数递归-匿名函数-生成器

1 函数的执行流程函数的执行需要对函数进行压栈的，什么是压栈呢，简而言之就是在函数执行时在栈中创建栈帧存放需要变量以及指针的意思。具体涉及的知识非常多，这里就已一个Python脚本简单进行分析。当我们运行上面代码时，它的执行…
阅读更多...
【2】信息的表示和处理

【2】信息的表示和处理

1.现代计算机存储和处理的信息都以二值信号表示。 2.机器为什么要使用二进制进行存储和处理？ 答：二值信号能够很容易的被表示、存储、传输。例如： 可以表示为穿孔卡片上有洞和无洞、导线上的高压和低压，顺逆时针的磁场。 3.大多数…
阅读更多...
java版b2b2c社交电商spring cloud分布式微服务（二） 服务消费者（rest+ribbon）

java版b2b2c社交电商spring cloud分布式微服务（二） 服务消费者（rest+ribbon）

一、ribbon简介 Ribbon is a client side load balancer which gives you a lot of control over the behaviour of HTTP and TCP clients. Feign already uses Ribbon, so if you are using FeignClient then this section also applies. —–摘自官网 ribbon是一个负载均衡客…
阅读更多...
[学习笔记]支配树

[学习笔记]支配树

被支配树支配的恐惧 定义 显然，这个支配关系是一个树（或者如果有的点不能从r到达，就是一个树一堆点）。 首先不会成环，其次也不会是DAG 即如果A支配C，B支配C，那么A和B之间必然有支配关系 解法 首…
阅读更多...
RBAC 权限设计（转载）

RBAC 权限设计（转载）

来源 ：https://blog.csdn.net/rocher88/article/details/43190743 这是我在网上找的一些设计比较好的RBAC权限管理不知道，像新浪、搜狐、网易、百度、阿里巴巴、淘宝网的RBAC用户权限这一块，都是这种细颗粒的RBAC设计开发，还是把他…
阅读更多...
20172311 2017-2018-2 《程序设计与数据结构》第八周学习总结

20172311 2017-2018-2 《程序设计与数据结构》第八周学习总结

20172311 2017-2018-2 《程序设计与数据结构》第八周学习总结 教材学习内容总结 本周对JAVA中的多态性进行了学习 多态性引用能够随时间变化指向不同类型的对象，是通过后绑定实现的。实现多态性的主要途径有两种： 1.由继承实现多态性 2.利用接口实现多态…
阅读更多...
Linux系统安装Apache 2.4.6

Linux系统安装Apache 2.4.6

http://www.cnblogs.com/kerrycode/p/3261101.html Apache简介 Apache HTTP Server（简称Apache）是Apache软件基金会的一个开放源码的网页服务器，可以在大多数计算机操作系统中运行，由于其多平台和安全性被广泛使用，是最…
阅读更多...
lnmp化境开启pathinfo,支持tp5.0等访问

lnmp化境开启pathinfo,支持tp5.0等访问

一、 开启pathinfo　　 #注释 下面这一行 #include enable-php.conf #载入新的配置文件 include enable-php-pathinfo.conf #添加如下location / {if (!-e $request_filename){rewrite ^/(.*)$ /index.php/$1 last;break;}}location ~ /index.php {fastcgi_pass 127.0.0.1:…
阅读更多...
openfire(一)：使用idea编译openfire4.2.3源码

openfire(一)：使用idea编译openfire4.2.3源码

最近公司项目要使用openfire，并对源码做一些修改，使用的openfire版本为官网目前最新版本4.2.3，网上资料较少，踩了很多坑，特此记录。 1.下载源码 http://www.igniterealtime.org/downloads/source.jsp 2.使用idea导入源…
阅读更多...
[BZOJ] 1688: [Usaco2005 Open]Disease Manangement 疾病管理

[BZOJ] 1688: [Usaco2005 Open]Disease Manangement 疾病管理

1688: [Usaco2005 Open]Disease Manangement 疾病管理 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 727 Solved: 468[Submit][Status][Discuss]Description Alas! A set of D (1 < D < 15) diseases (numbered 1..D) is running through the farm. Farmer John woul…
阅读更多...
Image-to-Image Translation with conditional Adversarial Networks ---- Pix-2-Pix

Image-to-Image Translation with conditional Adversarial Networks ---- Pix-2-Pix

任务场景 Photos to semantic segmentationCityscapes labels to photosColorizationFacades labels to photoDay to nightThe edges to photoAnd so on.在生成器模型中&#xff0c;条件变量y实际上是作为一个额外的输入层&#xff08;additional input layer&#xff09;&…
阅读更多...
5分钟从零构建第一个 Apache Flink 应用

5分钟从零构建第一个 Apache Flink 应用

为什么80%的码农都做不了架构师&#xff1f;>>> 在本文中&#xff0c;我们将从零开始&#xff0c;教您如何构建第一个Apache Flink &#xff08;以下简称Flink&#xff09;应用程序。 开发环境准备 Flink 可以运行在 Linux, Max OS X, 或者是 Windows 上。为了开发…
阅读更多...
Android6.0------权限申请RxPermissions

Android6.0------权限申请RxPermissions

前面写了Android6.0权限介绍和权限单个&#xff0c;多个申请&#xff0c;用的是纯Java代码&#xff0c;本文主要说的是借助第三方库来实现权限申请。 借助第三方库 RxPermissions来申请6.0权限。 RxPermissions库地址&#xff1a;https://github.com/tbruyelle/RxPermissions …
阅读更多...
博客作业04--树

博客作业04--树

1.学习总结(2分) 1.1树结构思维导图 1.2 树结构学习体会 树这一章节比较复杂&#xff0c;知识点繁多&#xff0c;结合了递归的知识所以代码阅读起来会有障碍&#xff0c;难以理解&#xff0c;所以学起来比较吃力&#xff0c;而且很多经典的算法理解的不是很透彻解决pta上的问题…
阅读更多...
[DP/单调队列]BZOJ 2059 [Usaco2010 Nov]Buying Feed 购买饲料

[DP/单调队列]BZOJ 2059 [Usaco2010 Nov]Buying Feed 购买饲料

首先我想吐槽的是题目并没有表明数据范围。。。 这个题目 DP方程并不难表示。 dp[i][j]表示前i个地点携带了j个货物的最小花费 dp[i][j] dp[i-1][k] (j-k) * cost j*j*(leng[i]-leng[i-1]) 如果你这样直接提交上去&#xff0c;恭喜你超时&#xff01;&#xff01;&#xff0…
阅读更多...
039_MySQL_多表查询

039_MySQL_多表查询

#创建部门 CREATE TABLE IF NOT EXISTS dept (did int not null auto_increment PRIMARY KEY,dname VARCHAR(50) not null COMMENT 部门名称 )ENGINEINNODB DEFAULT charset utf8;#添加部门数据 INSERT INTO dept VALUES (1, 教学部); INSERT INTO dept VALUES (2, 销售部); IN…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023