前端好文

JS内置对象,函数与作用域

2017-05-31  本文已影响0人  草鞋弟

1.JavaScript基于对象的语言

JavaScript和PHP不一样的地方在于：

1.1数组对象

对象主要是由属性、方法组成的，所以学习数组对象就是学习数组对象提供的属性和方法;

length属性获取数组元素的个数 concat属性连接数组生成新的数组 join使用特定的分隔符将数组连接成字符串 分别两数组末尾添加元素,删除末尾元素 添加数组第一个元素,删除数组第一个元素 颠倒数组元素的顺序 数组转换为字符串,但是方法执行后要接收一下

1.2字符串对象

查询某个字符在字符串中首次,末次出现的索引位置 split是经常使用的方法 字符串替换 注意match方法是比较常用的利用正则表达式来匹配字符串的方法 查找在指定索引位置的字符是什么 不包括包含位置 要注意负数的情况 将字符串转换为大写或者小写

1.3数学对象

JavaScript给我们提供的用来进行数学计算的对象，Math

数字向下取整 四舍五入 取最大最小值 计算某数的次方 返回数值的平方根

Math.random()，返回0-1之间的小数,这是js中取随机数的一种方法

1.4日期对象

说明：日期对象是JavaScript封装的用来操作日期、时间的对象
通过new Date()获得日期对象

日期时间 获取当前是星期几 毫秒部分

\

image.png

getDay()返回的是0-6的数字,分别代表了0为星期日,6为星期六;

1.5正则表达式对象

这个在正则表达式,我有做详细的论述

1.6DOM对象

这个在DOM操作这章我有做详细的论述

1,7BOM对象

BOM，Browser Object Model，浏览器对象模型，独立于内容之外的，和浏览器进行交互的对象（前进、后退、地址栏、浏览器本身一些信息等）
BOM这个浏览器对象模型给我提供了如下子对象和浏览器进行交互：

location对象操作浏览器的地址 要注意可用宽高和实际宽高的区别 这部分内容了解即可,不必过于深入

1.8 Window对象

window，指的是浏览器窗口，也是javascript的一个顶层对象，该对象包括DOM
、BOM，也就是说：DOM对象、BOM对象都是window的子对象

window对象是js的顶层对象

除了DOM、BOM之外，window对象还提供了一些方法供我们使用：


如果点击确定,则返回true,如果点击取消则返回false

弹出一个输入框

<h1>复习部分</h1>
<h1>1.什么是变量的声明前置?什么是函数的声明前置?</h1>
所谓变量提升是指javaScript引擎的一种工作方式,先解析代码,获取所有声明的变量,之后再一行一行的运行,因此我们在js中先声明变量,再给变量赋值,其运行机制是先把变量的声明语句提升到代码的头部,相当于在代码的预执行阶段,变量就已经在头部执行了,并赋值为undefined;
而函数声明前置,则是在函数预执行阶段,将函数声明语句提到代码头部执行,那么该函数实际在代码正式执行之前就已经声明过了,因此在js中,调用函数语句可以写在函数声明语句的前面.

<h1>2.函数声明和函数表达式有什么区别?</h1>
<h3>首先明白怎么定义函数?</h3>
定义函数的方法有三种:

函数声明语法格式如下:
function functionName(){ statement; } printName();

函数声明的重要特征之一是<b>函数声明提升</b>,意思是执行代码之前会读取函数声明,这也就意味着函数声明可以放在调用它的语句后面,如下:
sayHi(); function sayHi(){ alert("Hi"); }
结果是返回弹窗Hi.

函数表达式语法格式如下:
var printName = function(){ console.log('Byron'); };

函数表达式的形式看起来似乎是一个常规的变量赋值语句,即将函数作为一个值赋给变量,同样的也能够将函数作为其他函数的值返回.

<h3>那么函数表达式与函数声明有什么区别了?</h3>


声明函数时,不设置函数名会提示语法错误;

<h1>3.arguments 是什么?</h1>
在函数内部可以使用arguments对象获取到该函数的所有传入参数:

<h1>4.函数的"重载"怎样实现?</h1>
在JavaScript中没有函数重载的概念，函数通过名字确定唯一性，参数不同也被认为是相同的函数，后面的覆盖前面的.
可以在函数体针对不同的参数调用执行相应的逻辑。如下所示:
`function printPeopleInfo(name, age, sex){
if(name){
console.log(name);
}

if(age){
    console.log(age);
}

if(sex){
    console.log(sex);
}

}
printPeopleInfo('Byron', 26);
printPeopleInfo('Byron', 26, 'male');`

<h1>5.立即执行函数表达式是什么？有什么作用</h1>
立即执行函数表达式就是(function(){})()
使用立即执行函数表达式的作用是隔离变量，防止全局变量被污染;

<h1>6.求n!，用递归来实现</h1>

<h1>7.以下代码输出什么？</h1>


输出结果应该是:
//name:饥人谷; age:2; sex:男;name:valley;
//name:小谷; age:3; sex: undefined;name:valley;
//name:男;age: undefined; sex: undefined; name: valley;

<h1>8.写一个函数,返回参数的平方和?</h1>


平方和函数如下:

<h1>9. 如下代码的输出？为什么?</h1>

<h1>10. 如下代码的输出？为什么</h1>

<h1>11. 如下代码输出什么? 写出作用域链查找过程伪代码</h1>

1.全局作用域:
globalContext = {
    AO: {
        x: 10;
        foo: function;
        bar: function;
    }
    Scope: null;
}
//声明foo时,得到scope属性
foo.[[scope]] = globalContext.AO;
//声明bar时,得到scope属性
bar[[scope]] = globalContext.AO;

2.当调用bar()时,进入bar的执行上下文
barContext = {
    AO:{
        x: 30;
    }
    Scope: bar.[[scope]]// bar[[scope]] = globalContext.AO
}

3.调用foo(),先从bar执行上下文的活动变量(AO)中找,找不到再从bar.[[scope]]中找,找到后进行调用
4.调用foo(),进入foo的执行上下文
fooContext{
    AO{
        null
    }
    Scope: foo.[[scope]]//foo.[[scope]]=globalContext.AO;
}
5.在globaContext.AO中,x:10;因此调用foo()输出为10;
6.整体调用bar[],输出结果为10;

结果于预期一致,输出为10;

<h1>12. 如下代码输出什么? 写出作用域链查找过程伪代码</h1>

1.全局作用域
globalContext{
    AO{
        x:10;
        bar: function;
    }
    Scope: null
}
//声明函数bar得到Scope属性
bar[[scope]] = globalContext.AO;
2.执行bar(),进入bar的执行上下文
bar.Context{
    AO{
        x: 30;
        foo : function;
    }
    Scope: bar[[scope]]//bar[[scope]]=globalContext.AO
        }
//声明函数foo得到其Scope属性
foo[[scope]] = bar.context.AO;

3.执行bar()时,调用foo(),这时进入foo的执行上下文
foo.Context{
    AO{
        null;
    }
    Scope: foo.[[scope]];//foo.[[scope]]=bar.context.AO
}
4.执行console.log(x),x从当前foo.Context.AO中查找,无果,从foo.[[scope]]中查找,实质上就是从bar.Context.AO中查找,查到x=30,因此输出结果应该为30;

如同预期输出结果为30;

<h1>13. 以下代码输出什么? 写出作用域链的查找过程伪代码</h1>

  1.全局作用域
globalContext{
    AO{
        x :10;
        bar : function;
    }
    Scope: null;
}
//声明bar函数时,bar函数得到Scope属性
bar.[[scope]] =  globalContext.AO;

2.执行bar(),进入bar的执行上下文
bar.Context{
    AO{
        x: 30;
        立即执行函数(匿名函数): function;
    }
    Scope: bar.[[scope]] //bar.Context=globalCotext.AO;
}
声明立即函数时,立即执行函数得到属性Scope
function.[[scope]] = bar.Context.AO;

3.调用立即执行函数,进入其执行上下文
function.Context{
    AO{
        null;
    }
    Scope: function.[[scope]];
}

4.执行console.log(x),x从当前执行上下文中查找,先查function.Context.AO,无果,之后从function.[[scope]]中查找,function.[[scope]]=bar.Context.AO, 从中查找查x=30;
    输出 30;

<h1>14. 以下代码输出什么？ 写出作用域链查找过程伪代码</h1>

 1.全局作用域
globalContext{
    AO{
        a: 1;
        fn : function;
        fn3 : function;
    }
    Scope: null;
}
//声明函数fn时,得到其Scope属性 
fn.[[scope]]  = globalContext.AO;
//声明函数fn3时,得到其Scope属性
fn3.[[scope]] = globalContext.AO;

2.调用fn(),进入fn的执行上下文
fnContext{
    AO{
        a:5;
        a:6;
        fn2: function;
    }
    Scope: fn.[[scope]] //fn.[[scope]] = globalContext.AO 
       }
//声明fn2,得到其属性Scope
fn2.[[scope]] = fnContext.AO;

3.执行第一个console.log(a),输出为undefined;

4.赋值操作,a=5;

5.执行第二个console.log(a),输出5;

6.a++,a =6;

7.调用fn3(),进入fn3的执行上下文
fn3Context{
    AO{
        null
    }
    Scope: fn3.[[scope]];//fn3.[[scope]]=globalContext.AO;
}

8.执行fn3内部console.log(a),a搜寻当前执行上下文,从fn3,[[scope]]中搜寻,a=1;输出1;之后执行赋值操作,a=200;调用fn3完毕

9.调用fn2(),进入fn2的执行上下文
fn2Context{
    AO{
        null
    }
    Scope: fn2.[[scope]]//fn2.[[scope]] = fnContext.AO;
}

10.执行fn2内部的console.log(a),a从当前执行上下文中搜寻,从fn2.[[scope]]中搜寻得a=6,输出5;之后赋值操作,a=20;调用fn2结束

11.执行console.log(a),输出20;调用fn()结束;

12.执行console.log(a),此时全局变量a为200;

总的输出: undefined,5,1,6,20,200;
上一篇 下一篇

猜你喜欢

热点阅读