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,一经查实,立即删除!

相关文章

茶杯头开枪ahk代码

;说明这个工具是为了茶杯头写的,F1表示换枪攻击,F3表示不换枪攻击,F2表示停止攻击. $F1::loop{ GetKeyState, state, F2, Pif state D{break } Send, {l down}Send, {l up}sleep,10Send,{m down}Send,{m up} }return $F3::loop{ GetKeyState, state, F2, Pif state D{break }…

Vim使用技巧:撤销与恢复撤销

在使用VIM的时候,难免会有输错的情况,这个时候我们应该如何撤销,然后回到输错之前的状态呢?答案:使用u(小写,且在命令模式下)命令。 但如果有时我们一不小心在命令模式下输入了u&…

PaddlePaddle开源平台的应用

最近接触了百度的开源深度学习平台PaddlePaddle,想把使用的过程记录下来。 作用:按照这篇文章,能够实现对图像的训练和预测。我们准备了四种颜色的海洋球数据,然后给不同颜色的海洋球分类为0123四种。 一、安装paddlepaddle 1.系统…

Hyperledger Fabric区块链工具configtxgen配置configtx.yaml

configtx.yaml是Hyperledger Fabric区块链网络运维工具configtxgen用于生成通道创世块或通道交易的配置文件,configtx.yaml的内容直接决定了所生成的创世区块的内容。本文将给出configtx.yaml的详细中文说明。 如果需要快速掌握Fabric区块链的链码与应用开发&#x…

js闭包??

<script>var name "The Window";var object {name : "My Object",getNameFunc : function(){console.log("11111");console.log(this); //this object //调用该匿名函数的是对象return function(){console.log("22222");co…

JavaScript----BOM(浏览器对象模型)

BOM 浏览器对象模型 BOM 的全称为 Browser Object Model,被译为浏览器对象模型。BOM提供了独立于 HTML 页面内容&#xff0c;而与浏览器相关的一系列对象。主要被用于管理浏览器窗口及与浏览器窗口之间通信等功能。 1、Window 对象 window对象是BOM中最顶层对象&#xff1b;表示…

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&#xff08;JWT&#xff09;是…

DOM操作2

一、API和WebAPI API就是接口&#xff0c;就是通道&#xff0c;负责一个程序和其他软件的沟通&#xff0c;本质是预先定义的函数。Web API是网络应用程序接口。包含了广泛的功能&#xff0c;网络应用通过API接口&#xff0c;可以实现存储服务、消息服务、计算服务等能力&#x…

浮动布局demo

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>浮动布局</title><style type"text/css">*{margin: 0;padding: 0;}header{height: 150px;background: yellow;}nav{height: 30px;background: green;…

UI行业发展预测 系列规划的调整

我又双叒叕拖更了&#xff0c;上一篇还是1月22号更新的&#xff0c;这都3月9号了……前面几期把职业规划、能力分析、几个分析用的设计理论都写完了&#xff0c;当然实际工作中用到的方法论不止上面这些&#xff0c;后续会接着学习&#xff1b;如果你的目标是一线团队&#xff…

出现Press ENTER or type command to continue的原因

cd 然后 vim .vimrc 写入 set nu 保存 退出转载于:https://www.cnblogs.com/520qtf/p/8968441.html

基于Flask实现后台权限管理系统 - 导言

网上有这样一个段子&#xff0c;在评论语言好坏的时候&#xff0c;都会有人评论说PHP是世界上最好的语言&#xff0c;人生苦短我用Python&#xff0c;这里姑且不去评论语言的好坏&#xff0c;每一个语言存在都有它的价值&#xff0c;譬如C语言适合底层开发&#xff0c;整个Linu…

5-1 unittest框架使用

unittest是python的一个单元测试框架&#xff0c;内置的&#xff0c;不需要pip install 什么什么的。直接在py文件里面调用 import unittest。 他这个框架是怎么回事呢&#xff0c;他可以对数据初始化&#xff0c;然后执行测试&#xff08;里面有断言功能就是判断返回是否正确…

bzoj 4573: [Zjoi2016]大森林

Description 小Y家里有一个大森林&#xff0c;里面有n棵树&#xff0c;编号从1到n。一开始这些树都只是树苗&#xff0c;只有一个节点&#xff0c;标号为1。这些树 都有一个特殊的节点&#xff0c;我们称之为生长节点&#xff0c;这些节点有生长出子节点的能力。小Y掌握了一种魔…

Unity3D在C#编程中的一些命名空间的引用及说明

System包含用于定义常用值和引用数据类型、事件和事件处理程序、接口、属性和处理异常的基础类和基类。其他类提供支持下列操作的服务&#xff1a;数据类型转换&#xff0c;方法参数操作&#xff0c;数学计算&#xff0c;远程和本地程序调用&#xff0c;应用程序环境管理以及对…

docker入门简介

简介docker(容器技术)是实现虚拟化技术的一种方案,通过利用linux中命名空间,控制组和联合文件系统这个三个主要技术,来实现应用程序空间的隔离.通过对应用程序运行环境的封装来生成镜像并部署来实现跨平台,一定程度上加快了服务交付的整体流程.这篇文章主要介绍docker的一些基本…

Highcharts 配置选项详细说明

http://www.runoob.com/highcharts/highcharts-setting-detail.html 转载于:https://www.cnblogs.com/mengfangui/p/8969121.html

linux下的启停脚本

linux下的根据项目名称&#xff0c;进行进程的启停脚本 #!/bin/bashJAVA/usr/bin/java APP_HOME/opt/program/qa/wechat APP_NAMEprogramname.jar APP_PARAM"--spring.config.location${APP_HOME}/application.properties --logging.path${APP_HOME}"case $1 in star…

python 网页爬取数据生成文字云图

1. 需要的三个包&#xff1a; from wordcloud import WordCloud #词云库 import matplotlib.pyplot as plt #数学绘图库 import jieba; 2. 定义变量&#xff08;将对于的变量到一个全局的文件中&#xff09;&#xff1a; import re; pdurl_firsthttps://movie.do…

python---重点(设计模式)

前戏&#xff1a;设计模式简介 设计模式是面向对象设计的解决方案&#xff0c;是复用性程序设计的经验总结。&#xff08;与语言无关&#xff0c;任何语言都可以实现设计模式&#xff09; 设计模式根据使用目的的不同而分为创建型模式&#xff08;Creational Pattern&#xff0…