[js]02js预解释-作用域-this关键字

js预解释 作用域 this关键字

• 预解释
• 作用域
• this

如何查找当前作用域的上一级作用域?

• 看当前函数是在哪个作用域下定义的,那么它的上级作用于就是谁
• 和函数在哪执行的没任何关系

var  num = 12;
function fn() {
    var num = 120;
    return function () {
        console.log(num);
    }
    var f = fn();
    f(); // 上一级作用于是A
    ~function () {
        var num = 1200;
        f(); // 上一级作用于是A,和在哪里执行的无关
    }()
}

函数的预解释:

自执行函数不进行预解释

js内存的释放

堆内存释放

• 堆内存的释放

  • 对象或者
  • 函数 定义时候都会开辟堆内存

• 规则

  • 对象数据类型或者函数数据类型在定义的时候,首先会开辟一个队内存,堆内存有一个引用地址,如果外边有变量等知道了这个地址,我们就说这个内存被占用了,就不能被销毁了.
  • 我们想让堆内存释放/销毁,只需要把所有引用它的变量值赋值给null即可.如果当亲啊堆内存没有被任何东西占用,则浏览器在空闲的时候把他销毁i

var obj = {name:"maotai"};
var obj2 = obj;

obj = null;
obj2 = null;

栈内存的释放

• 全局作用域:只有当页面的关闭销毁
• 私有作用域: 只有函数执行时候会产生私有的作用域.
  
  • 以下是代码块,不会开辟私有作用域.

for(){}
if(){}
switch(){}

• 一般情况下,函数执行会形成一个新的私有作用域,当私有作用域中的代码执行完成后,我们当前的作用域都会主动的进行释放和销毁.

• 特殊情况:

  • 当前私有作用域中的部分内存被作用域意外的东西占用了,那么当前这个作用域就不能被销毁了.
    

  • 特殊情况1:
    函数执行返回了一个引用数据类型的值,并且在函数在外边被一个其他的东西接受,这总请客下一般形成的私有作用域不会被销毁.

function fn() {
    var num = 1000;
    return function () {

    }
}
var f = fn() //fn执行形成的私有作用域就不能被销毁了

• 特殊情况2
  在一个私有作用域中给DOM元素的事件绑定方法,一般情况下,我们的私有作用域都不能销毁

var oDiv = document.getElementById("div1");
~function () {
    Odiv.onclick = function () {

    }
}(); //当前私有作用域不能被销毁

ps: 通过getelement取得的是object类型数据

• 特殊情况3:

不立即销毁–>fn返回函数没有被其他东西调用,但是还需要执行一次呢,所以暂时不小hi,当返回值执行完成后,浏览器会在空闲时候把他销毁.

function fn() {
    var num = 100;
    return function () {

    }
}
fn()();

作用域实战题

function fn () {
    var i = 10;
    return function(n){
        console.log(n+(++i));
    }
}

var f = fn();
f(10); //21
f(20);//32

fn()(10);//21
fn()(20);//31

![image]http://ww1.sinaimg.cn/large/9e792b8fgy1fiez0429g1j213e0gjajx)

另外一道题

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

使用闭包作用域的方式实现选项卡循环绑定事件的处理

this关键字

console.log(this) //window

• js中this代表的是当前行为执行主体, 我们主要研究函数中的this

function 吃饭(){
    this-->张三
}
张三.吃饭()

• js中context代表当前行为执行的环境或区域.

  • 张三在沙县小吃 吃蛋炒饼, this是张三, context是沙县小吃.

• this是谁和函数在哪定义的 和 在哪里执行的都没任何关系.

~function(){
    张三.吃饭();
}

如何区分this?

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

function fn() {
    console.log(this);
}
var obj = {fn:fn};
fn();// this-->window
obj.fn();// this-->obj

function sum(){
    fn(); // this-->window
}

sum();

function fn() {
    console.log(this)
}
var oo = {
   // sum里的this是oo
    sum: function () {
        fn(); // this--> window
    }
}
oo.sum();

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

<div id="div1" style="width: 100px;height: 100px;background-color:green;">123213123</div>

<script>
function fn() {
    console.log(this) // this ->document.getElementById("div1")
}
document.getElementById("div1").onclick=fn;
</script>

结果:

<div id="div1" style="width: 100px;height: 100px;background-color:green;">123213123</div>

另一个例子:

document.getElementById("div1").onclick=function(){
    // this--> #div1
    fn(); // this->window
};

实战题

var num = 20;
var obj = {
    num: 30,
    fn:(function (num) {
        this.num*=3;
        num +=15;
        var num = 15;
        return function () {
            this.num*=4;
            num+=20;
            console.log(num);
        }
    })(num)
};
var fn=obj.fn;
fn(); //35
obj.fn(); //55
console.log(window.num,obj.num) //240 120

案例多种方法

实现效果: 点button数字累加

案例:实例
实现点击自加:

1.利用全局作用域不销毁原理.把需要累加的数字定义为全局变量

    var oBtn = document.getElementById("btn");
    var spanNum=document.getElementById("spanNum");
    var count=0;
    btn.onclick=function () {
        count++;
        spanNum.innerHTML=count;
    }
//弊端:为了防止项目中全局变量之间的冲突,我们一般是禁止使用全局变量.

2.思想:自建一个不销毁的私有作用域

~function(){}();

~function(){  // 在私有作用域中给外部的一个元素对象的某一个事件绑定一个方法.
    var oBtn = document.getElementById("btn");
    var spanNum=document.getElementById("spanNum");
    var count=0;
    btn.onclick=function () {
        count++;
        spanNum.innerHTML=count;
    }    
}();

3,思想和2相同

返回一个引用类型给oBtn,则自执行函数也无法被销毁.

oBtn.onclick=(function(){
    var count = 0;
    return function(){
        count++;
        spanNum.innerHTML=count;
    }
})();
//弊端: 占用内存

4.第三种方法:利用innerHTML的方式处理:每一次点击的时候,都先回到页面中获取值,然后累加,最后把累加的结果放回去.

oBtn.onclick=function(){
    //spanNum.innerHTML=spanNum.innerHTML+1; //获取的是字符串,有问题
    spanNum.innerHTML++;//自动转换,且实现自加.
};
//弊端: 每一次都要把页面中的内存先转换为字符串,然后累加,累加完成后重新添加回去,当重新欠佳的时候浏览器都需要重新渲染

5.利用自定义属性存储.

oBtn.count=0; //给oBtn添加属性
oBtn.onclick=function(){
    spanNum.innerHTML=++this.count;
}