JavaScript提高篇之预解释作用域以及this原理及其应用
1.预解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>预解释1</title> <script type="text/javascript">
/*js中的数据类型：*/
//1.基本数据类型：(按照值来进行操作的)
//number，string，Boolean，undefined,null //2.引用数据类型：(是按照地址进行操作的)
//object：{} [] /^$/ Date
//function：
// 例1：
console.log(num);//num=undefined,为什么是未定义，因为声名了但是没有赋值，所以是未定义。
var num=12;
console.log(num);//定义了12；所以值是12；
var obj={name:"lizebo",age:23};
fn(100,200);//300可以在上面执行，因为预解释的时候声明＋定义已经完成了。
function fun(){
console.log("easy js!")
}
console.log(fun)//->把整个函数的定义部分（函数本身）在控制台输出
console.log(fn(1,2))//->把当前函数执行的返回结果（return后面的值放回，如果没有return，默认返回的是undefined）
//图片见images中的基本数据类型和引用数据类型的存储方式.PNG
//1.当浏览器加载HTML页面的时候，首先会提供一个全局JS代码执行的环境>全局作用域
//（global/window） //2.预解释（变量提声）
//在当前的作用域中，JS代码执行之前，浏览器首先会把默认的所有带var和function的进行提前声明或者（注意是或者，function就是声明+定义）定义（这是浏览器的
//机制).
//1）声明和定义：
//var num =12;
//声明（declare）：var num;-->告诉浏览器在全局作用域中有一个num的变量。
//定义（defined）:num=12;-->num=12;-->给我们的变量进行赋值。 //2）对于带var和function关键字的在预解释的时候操作还是不一样的
//var ->在预解释的时候只是提前的声明
//function->在预解释的时候提前的申明+定义都完成了。
//见图：浏览器预解释过程.png
//3)预解释只发生在当前的作用域下，列入：开始只对window下进行预解释，只有函数执行的时候才会对函数中的内容进行预解释。 //3.js中内存的分类
//堆内存：用来存储引用数据类型的值-》对象存储的是属性名和属性值，函数存储的是字符串代码块
//栈内存：用来提供一个js代码执行的环境-》作用域（全局作用域和私有作用域）
function fn(num1,num2){
var total=num1+num2;
console.log(total);
}
</script>
</head>
<body> </body>
</html>
1)基本数据类型和引用数据类型的存储方式
2)浏览器预解释过程
2.作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作用域链2</title> <script type="text/javascript">
//1.如何区分私有变量和全局变量（作用域链机制）
//1）在全局作用域下申明（预解释的时候）的变量是全局变量
//2）在私有作用域中声明的变量和函数的形参都是私有的变量
//在私有作用域中，我们代码执行的的时候遇到了一个变量，首先我们需要确定他是不是私有变量，如果是私有变量，那么和外面的没有关系。
//如果不是私有的，则往当前作用域的上级作用域进行查找，如果上级作用域也没有则继续查找，一直找到window。 //2.当函数执行的时候（直接目的：让函数体中的代码执行），首先会形成私有的作用域（在栈内存中）
//然后按照如下步骤执行：
//1）如果有形参，先给形参赋值
//2）进行私有作用域中的预解释
//3）私有作用域中的代码从上到下执行
//...未完待续
//函数形成一个新的私有作用域保护了里面的私有变量不受外界的干扰（外面修改不了私有的,私有的也修改不了外面的。
// 这种机制就是“闭包“--简单说就是互不影响。
// ）
console.log(totlal);//undefined
var total=0;
function fn(num1,num2) {
console.log(total);//undefined
var total=num1+num2;
console.log(total);//300
}
fn(100,200);
console.log(total)//0 //=========另外一个例子========
console.log(total1);//undefined
var total1=0;
function fn22(num2,num3) {
console.log(total1);//0;
total1=num3+num2;
console.log(total1);//300:这里为什么是300不是其他值，就是因为作用域链的机制。。
}
fn22(100,200);
console.log(total1)
</script>
</head>
<body> </body>
</html>
3.全局变量的细节问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局变量的细节问题3</title> <script type="text/javascript">
//在全局作用域中，带var和不带var的关系？
//区别：带var的可以进行预解释，所以在赋值的前面执行不会报错；不带var的是不能进行预解释的
//在前面执行会报错。
console.log(num);//->undefined
var num=12; //console.log(num2);//->Uncaught ReferenceError: num2 is not defined
num2=12; //============例子2===========
//关系:num2=12->相当于给window增加了一个叫做num2的属性名，属性值是12；
//var num=12;->首先它相当于给全局作用域增加了一个全局变量num,但是不仅如此，
//它也相当于给window增加了一个属性名，属性值是12；
var num3=12;
console.log(num3);
num4=12;
console.log(num4);
console.log(window.num4)
</script>
</head>
<body> </body>
</html>
4.total加var和不加var的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>total加var和不加var的区别4</title>
<!--js中迷幻赋值，到底是给变量赋值，还是给属性赋值?-->
<script type="text/javascript">
//私有作用域中出现的一个变量不是私有的，则往上级作用域进行查找，上级作用域没有则继续向上
//进行查找，一直知道到window为止3，如果window下也没有呢？
//我们是获取值：console.log(total);-->报错，没有声明变量
//我们是设置值total=100；->相当于window增加了一个属性名为total，属性值为100； function fn(){
total=100;
//这里不是变量赋值，他是看私有域-没有var声明的变量-》向上找-没有—》window也没有就只能给window赋值，使得属性名字是total，值是100；
}
fn();
console.log(total)
//这一这里的total不是变量，是window的属性值，这是2个不同的概念，但是值是相同的。
//相当于:
console.log("这一这里的total不是变量，是window的属性值，这是2个不同的概念，但是值是相同的。")
console.log(window.total);
</script>
</head>
<body> </body>
</html>
5.预解释是一种毫无节操的机制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>预解释是一种毫无节操的机制5</title> <script type="text/javascript">
//预解释是一种毫无节操的机制 //in:"num" in window 判断num是否为window这个对象的属性，是的话返回true不是的话返回false var obj={name:"lizbe",age:23};
console.log("name" in obj);//true
console.log("eat" in obj);//false; //1.预解释的时候，不管条件是否成立都要把带var的进行提前声明。
//window的预解释：var num;->window.num;说白了就是先进性预解释在执行代码，而且不会管条件判断，因为在一个域中。
if(!("num" in window)){
var num=12;
}
console.log(num);//undefined
console.log("========例2=======");
//2.预解释的时候只预解释”=“左边的，右边的值，不参与预解释
//匿名函数之函数表达式：把函数定义的部分当作一个值赋值给我们的变量或者元素的某一个事件。 //window下的预解释：var fn;
//fun();//fn is not a function
var fun=function(){
console.log("ok");
}; //这也再次正式了fun存的是一个地址指向堆内存中的字符串,function(){
//console.log("ok");
//};
//正式由于js（预解释的存在，全球唯一的机制），所以可以多次使用这种模式，他可以定义一个函数，这个函数的上面是不可以执行的。 // fn();
// function () {
// console.log("ok")
// }
// fn(); //3.自执行函数定义的那个function在全局作用下不进行预解释，当代码执行到了这个位置的时候定义和执行一起完成了。
//自执行函数：定义和执行一起完成了
//
(function (num) {})(100);
//以下是装逼写法：
+function (num) {}(100);
-function (num) {}(100);
~function (num) {}(100);
!function (num) {}(100); //4.函数体中，return下面的代码虽然不在执行了，但是浏览器一运行就已经进行了预解释，所以预解释优先一切。
//return后面跟着的是返回的值，所以不进行预解释；
function funct() {
console.log(num);//-》undefined
return function(){ };
var num =100;
}
funct(); //5.在预解释的时候，如果名字已经声明过；不需要重新的声明；但是需要重新的赋值。
//在js中如果变量的名字和函数的名字重复了，也算冲突。
//预解释：var fn,window.fn; fn=xxxabbb23,window.fn=xxxabbb23;
var fn1=13;
function fn1() {
console.log("ok")
} //======例子=======
//window预解释：
//声明+定义 fn333=xxxfff111
//声明var fn333;(不需要重新声明)
//声明(不重复进行)+定义（但是会定义） fn333=xxxfff222
//-》fn=xxxfff222
//=====牛逼的例子：=========
console.log("牛逼的例子关于预解释！！！！！！")
fn333();//->2
function fun333() {console.log(1);};
fn333();//->2
var fn333=10;
fn333();//->error: fn is not a function.
function fn333() {console.log(2);};
fn333();
</script>
</head>
<body> </body>
</html>
6.如何查找上级作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何查找上级作用域</title> <script type="text/javascript">
//如何查找当前作用域的上级作用域?
//看当前函数实在那个作用域下定义的，那么它的上级作用域就是谁。
//和函数在哪里执行没有任何关系，
var num=12;
function fn() {
var num=120;
//见图作用域链.png你就知道这里为什么可以不写函数名称，因为这是一个指针链条。简称作用域链。
return function () {
console.log(num)
};
}
var f= fn();
f();//问执行结果：120； //这个结果又是什么呢？
!function () {var num=1200;f()}();//120； </script>
</head>
<body> </body>
</html>
7.关于内存释放和作用域销毁的研究
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7.关于内存释放和作用域销毁的研究.html</title> <script type="text/javascript">
//1.堆内存
//对象数据类型或者函数数据类型在定义的时候首先都会开启一个堆内存，并且堆内存有一个引用地址，如果外边有变量知道了这个地址
//我们就说这个内存被占用了，不能销毁。
var obj1={name:"张三"};
var obj2=obj1;
//内存销毁
obj1=null;
obj2=null;//null是空对象指针。专门释放空间的，但是不是立即释放，浏览器空闲的时候回收。换句话说，刚刚等于null的时候，并没有销毁；只是有一个机制
//在浏览器中，过一段时间，进行销毁。不只是赋值为null，为1，2...也行。
//表示的就是堆内存中没有任何东西占用了内存。 //2.栈内存：
//1）全局作用域：
// 只有当页面关闭的时候，全局作用域才会销毁
//2）私有作用域：(只有函数执行会产生私有作用域)
// 一般情况下，函数执行会形成一个新的私有作用域，私有作用域中当代码执行完成后，我们当前作用域都会进行主动释放和销毁。
//但是还是存在特殊情况的：
// 当前私有作用域中的部分内容被作用域以外的东西占用了，那么当前作用域就不能销毁了。
// a.函数执行返回了一个引用数据类型的值，并且在函数的外面被其他东西给接收了，这种情况下一般形成的私有作用域都不会销毁。
// 例子：
function fn() {
var num=100;
//返回的是一个引用数据类型的值
return function (){
};
}
//一个东西接收了函数的值。
var f=fn();//fn形成的私有作用域不能销毁。
var odiv1=document.getElementById("div1");
!function () {
odiv1.onclick=function () { };
}();//当前自执行函数也不能销毁。 //通过DOM方法获得的元素或者是元素集合类型都是对象数据类型的值
// b.在一个私有的作用域中绑定方法，一般情况下我们的私有作用域都不销毁。 // c.下述情况属于不立即销毁。--》fn返回的函数没有被其他的东西占用。但是还需要执行一次，所以暂时不销毁，当返回的值执行完毕后，
// 浏览器才会销毁。
function fnD() {
var num=100;
return function () { };
}
funD()();//首先执行fn,返回一个小函数对应的内存地址，紧接着让对应的小函数再执行。
//
</script>
</head>
<body>
<div id="div1" >有本事点我啊</div>
</body>
</html>
8.作用域练习题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作用域练习题</title> <script type="text/javascript">
//++i和i++
//都是自身加1，再和其他的值进行运算的时候有区别
//i++；是先拿i的值进行运算，运算完成本身+1
//++i；先本身累加1，然后那累加完成的结果去运算
var i=5;
console.log(1+(i++));//->6 i=6
console.log(1+(++i));//->8 i=7
console.log(2+(i++)+(++i)+(++i)+(i++));//38
console.log(i);//11
console.log("===========================") function fn() {
var i=10;
return function (n) {
console.log(n+(++i));
}
}
//见图 练习题.jpn
var f=fn();
f(10);//21
f(20);//32
fn()(10);//21
fn()(20);//31
//再来一题
console.log("==============");
function fn2(i){
return function (n) {
console.log(n+(i++));
}
}
var f2=fn2(13);
f2(12);//25;
f2(14);//28
fn2(15)(12);//27
fn2(16)(13);//29
</script>
</head>
<body> </body>
</html>
9.this
<!DOCTYPE html>
<html lang="en">
<head>
<!--说明以下：想要自己开发一个js框架，而不是通过造轮子开发；this必须能够灵活运用。-->
<meta charset="UTF-8">
<title>this</title> </head>
<body>
<div id="div1" >有本事点我啊！this总共有5个知识点，就是这样。</div> <script type="text/javascript">
//我们再js中主要研究的是1.函数中的this
console.log(this);
console.log("===============");
//2.js中的this代表的是当前行为执行的主体；js中的context代表的是
//当前行为执行的环境或者（区域）： //this是谁和函数再哪里定义的和再哪里执行的都没有任何的关系。
//如何区分this？
//1.函数执行，首先看函数名前面是否有”.“,有的话前面是谁this就是谁；没有的话就是window
function fnct() {
console.log(this);
}
var obj={fnct:fnct};
fnct();//this->window
obj.fnct();//this-->obj function sum() {
fnct();//this-->还是window
}
sum(); var oo={
//
sum:function () {
fnct();
}
};
oo.sum();//this-->window //2.自执行函数中的this永远是window
//3.给元素的某一个事件绑定方法，当事件触发的时候，执行对应的方法，方法中的
//this是当前的函数。
function fnctDemo() {
console.log(this)
}
document.getElementById("div1").onclick=fnctDemo;//fn中的this是#div1
document.getElementById("div1").onclick=function () {
//this--->#div1
console.log("=====")
console.log(this);
console.log("=========");
fnctDemo();
};//当点击的时候this的值是window，
</script>
</body>
</html>
10.综合是实战题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合是实战题</title>
</head>
<body>
<div class="box">
<h1>点击投票</h1>
<div id="btn">你投票吗？<span id="spanNum">0</span></div>
</div>
<div class="box1">
<h1>点击投票</h1>
<div id="btn1">你投票吗？<span id="spanNum1">0</span></div>
</div> <script type="text/javascript">
var oBtn=document.getElementById("btn");
var spanNum=document.getElementById("spanNum");
//1.利用全局作用域不销毁的原理，把需要累加的数字定义为全局变量
var count=0;
oBtn.onclick=function () {
count++;
spanNum.innerHTML=count;
};
//2.为了放置全局变量的相互冲突，在实际项目当中应该尽量不使用全局变量，或者说禁止使用全局变量。 var oBtn1=document.getElementById("btn1");
var spanNum1=document.getElementById("spanNum1");
//自己形成一个不销毁的作用域来保护我们需要累加的数字
+function () {
var count1=0;
oBtn1.onclick=function () {
count1++;
spanNum1.innerHTML=count1;
}
}();
// 另外一种形式：
// oBtn1.onclick=(function () {
// var count=0;
// return function () {
// count++;
// spanNum1.innerHTML=count;
// }
// })(); //弊端：有一个不销毁的私有作用域，所以占那么一丢丢内存。
//另外一种：利用innerHtml的方式处理，每一次点击的时候都到页面中获取最新的值，累加，把最后累加的结果重新放回去。
// oBtn1.onclick=function () {
// //spanNum1获取的页面中的内容返回的是一个字符串。
// //spanNum1.innerHTML=spanNum1.innerHTML+1;
// spanNum1.innerHTML++;
// };
//弊端：每一次都需要把页面中的内容先转换为字符串然后在累加，累加完在重新添加回去，
//当重新添加回去的时候浏览器都要重新渲染以下。 //4.利用自定义属性存储：比较好的方式。
oBtn1.count=0;
oBtn1.onclick=function () {
spanNum1.innerHTML=++this.count;
}; </script> </body>
</html>
11.练习题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习题</title>
</head>
<body>
<h1>见图练习题.png</h1>
<script type="text/javascript">
var num=20;
var obj={
num:30,
fn:(function(num){
this.num*=3;
num+=15;
var num=45;
return function () {
this.num*=4;
num+=20;
console.log(num);
};
})(num),//->把全局变量num的值20赋值给了自执行函数的形参,而不是
//obj下的30，如果是obj下的30，我们需要写obj.mum.
};
var fn=obj.fn;
fn();
obj.fn();
console.log(window.num,obj.num);
</script>
</body>
</html>
JavaScript提高篇之预解释作用域以及this原理及其应用的更多相关文章
- JavaScript提高篇之面向对象之单利模式工厂模型构造函数原型链模式
1.单例模式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- javascript提高篇+吐槽
开篇吐槽 最近一直在投简历找工作,对于博主这样的屌丝应届生来说,一没过硬的技术,二没经验,三没高学历,四没炫酷的项目,五还没漂亮的简历,简直就是3无产品+2b青年.所以快1个月了投的简历没有收到一个面 ...
- javascript提高篇
本章简介 本章内容比较少,有三个分享的知识.你可能都看过了,因为网上也有很多提问和解答,如果没看过或者没搞懂,你可以再看看这篇文章. 1. 数组去重方法的演变 -- 走向代码缩短化 2. [] ...
- 一步步学习javascript基础篇（2）:作用域和作用域链
作用域和作用域链 js的语法用法非常的灵活,且稍不注意就踩坑.这集来分析下作用域和作用域链.我们且从几道题目入手,您可以试着在心里猜想着答案. 问题一. if (true) { var str = & ...
- Java提高篇——JVM加载class文件的原理机制
在面试java工程师的时候,这道题经常被问到,故需特别注意. 1.JVM 简介 JVM 是我们Javaer 的最基本功底了,刚开始学Java 的时候,一般都是从“Hello World ”开始的,然后 ...
- 一步步学习javascript基础篇（0）:开篇索引
索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...
- 关于javascript中私有作用域的预解释
1.如何区分私有变量还是全局变量 1).在全局作用域下声明(预解释的时候)的变量是全局变量 2).在“私有作用域中声明的变量”和“函数的形参”都是私有变量 在私有作用域中,我们代码执行的时候遇到一个变 ...
- 扒一扒JavaScript 预解释
带var关键字预解释 让我们先看下这段代码执行的结果: 代码如下: alert(n);//弹出undefinedvar n = 10; 弹出的结果是undefined,为何不是10?让我们再看下面这段 ...
- 开心菜鸟系列－－－－函数作用域（javascript入门篇）
1 <!DOCTYPE html> 2 <html> 3 <script src="./jquery-1.7.2.js"></ ...
随机推荐
- Git 工作流的正确打开方式
前言 一直在使用git做版本控制,也一直工作很顺利,直到和别人发生冲突的时候.这才注意到git 工作流并不是那么简单.比如,之前遇到的清理历史.百度到的资料很多,重复性也很多,但实践性操作很少,我很难 ...
- Linux入门(14)——Ubuntu常用快捷键
打开终端:ctrl + alt + T 左右分屏:ctrl + win + 箭头左或者箭头右 显示桌面:Ctrl + win + D 切换工作区:ctrl + alt + 箭头左或者箭头右 新建文件夹 ...
- 【ASP.NET MVC 学习笔记】- 18 Bundle（捆绑）
本文参考:http://www.cnblogs.com/willick/p/3438272.html 1.捆绑(Bundle),一个在 View 和 Layout 中用于组织优化浏览器请求的 CSS ...
- django中使用sha1,md5加密
# salt 盐 使用sha1加密算法,返回str加密后的字符串 # 提高字符串的复杂的 from hashlib import sha1 def get_hash(str, salt=None): ...
- 【深度学习系列】手写数字识别卷积神经--卷积神经网络CNN原理详解(一)
上篇文章我们给出了用paddlepaddle来做手写数字识别的示例,并对网络结构进行到了调整,提高了识别的精度.有的同学表示不是很理解原理,为什么传统的机器学习算法,简单的神经网络(如多层感知机)都可 ...
- sqoop1.4.6从mysql导入hdfs\hive\hbase实例
//验证sqoop是否连接到mysql数据库sqoop list-tables --connect 'jdbc:mysql://n1/guizhou_test?useUnicode=true& ...
- lua中的require机制
lua中的require机制 为了方便代码管理,通常会把lua代码分成不同的模块,然后在通过require函数把它们加载进来.现在看看lua的require的处理流程.1.require机制相关的数据 ...
- Robotframework-Appium系列：安装配置
1. Robotframework-android系列:安装配置 1.1. 安装环境 64位win10家庭中文版 1.1. 安装说明 网上robotframework-appium安装资料也不少, ...
- 【OpenCV】一种基于阈值的图片中的文字分割
在今年泰迪杯A题电商中图片的文字识别这道题中,我们先用了一种很笨的办法来分割字符. 首先对图片进行灰度化,然后二值化,这里的二值化要选择一个合适的阈值.然后我们进行轮廓的提取,计算轮廓最小矩形的面积, ...
- 如何编写通用的 Helper Class
Github: https://github.com/nzbin/snack-helper Docs: https://nzbin.github.io/snack-helper 前言 什么是 help ...