题干 立即...">
美文网首页
进阶4：JS作用域链 & JS引用类型

进阶4：JS作用域链 & JS引用类型

作者: jrg陈咪咪sunny | 来源:发表于2017-12-07 18:19 被阅读0次
题干

立即执行函数表达式是什么？有什么作用？
回答内容

(function(){alert('我是匿名函数')}())

创建一个独立的作用域。
这个作用域里面的变量，外面访问不到（即避免「变量污染」）。
打分
评语

ok
题干

求n!，用递归来实现。
回答内容

function factorial(n){
if(n === 1){
return 1
}
return n * factorial(n-1)
}
factorial(3) //6
打分
评语

没有考虑 n为0 的情况
题干

以下代码输出什么？

    function getInfo(name, age, sex){
        console.log('name:',name);
        console.log('age:', age);
        console.log('sex:', sex);
        console.log(arguments);
        arguments[0] = 'valley';
        console.log('name', name);
    }

    getInfo('饥人谷', 2, '男');
    getInfo('小谷', 3);
    getInfo('男');

回答内容

"name:"
"饥人谷"
"age:"
2
"sex:"
"男"
[object Arguments] {
0: "饥人谷",
1: 2,
2: "男"
}
"name"
"valley"
"name:"
"小谷"
"age:"
3
"sex:"
undefined
[object Arguments] {
0: "小谷",
1: 3
}
"name"
"valley"
"name:"
"男"
"age:"
undefined
"sex:"
undefined
[object Arguments] {
0: "男"
}
"name"
"valley"
打分
评语
题干

写一个函数，返回参数的平方和？

   function sumOfSquares(){
   }
   var result = sumOfSquares(2,3,4)
   var result2 = sumOfSquares(1,3)
   console.log(result)  //29
   console.log(result2)  //10

回答内容

function sumOfSquares(){
var sum=0;
for(var i=0;i<arguments.length;i++){
sum=sum+arguments[i]*arguments[i];
}
return sum;
}
var result = sumOfSquares(2,3,4)
var result2 = sumOfSquares(1,3)
console.log(result) //29
console.log(result2) //10
打分
评语
题干

如下代码的输出？为什么？

    console.log(a);
    var a = 1;
    console.log(b);

回答内容

console.log(a); // undefined。因为下面的var a=1相当于var a，a=1。即声明了变量a也给a赋值了，因为变量提升的原因，所以在执行第一句时知道了a已经被声明但是却没有被赋值。所以显示为undefined。
var a = 1;
console.log(b);// 报错，b is not defined。代码中没有声明变量b也没有对其赋值，所以显示为b is not defined，而不是undefined。
打分
评语
题干

如下代码的输出？为什么？

    sayName('world');
    sayAge(10);
    function sayName(name){
        console.log('hello ', name);
    }
    var sayAge = function(age){
        console.log(age);
    };

回答内容

// hello world
// sayAge is not a function。error,因为下面这个是函数表达式，而函数表达式不会声明提前，所以sayAge(10)在前面调用是无效的。
打分
评语
题干

写一个函数squireArr，其参数是一个数组，作用是把数组中的每一项变为原值的平方

var arr = [3, 4, 6]
function squireArr( arr ){
  //补全
}
squireArr(arr)
console.log(arr)  // [9, 16, 36]

提示
arr 被修改了
回答内容

for(var i = 0; i < arr.length; i++){
arr[i] = arr[i] * arr[i];
}//补全
打分
评语
题干

如下代码的输出？为什么？

var x = 10
bar() 
function foo() {
  console.log(x)
}
function bar(){
  var x = 30
  foo()
}

回答内容

//10,
function foo() {
console.log(x)
}里面没有x的赋值，向上找，全局变量里有赋值，所以是10.
打分
评语
题干

写一个函数squireArr，其参数是一个数组，返回一个新的数组，新数组中的每一项是原数组对应值的平方，原数组不变

var arr = [3, 4, 6]
function squireArr( arr ){
  //补全
}
var arr2 = squireArr(arr)
console.log(arr)  // [3, 4, 6]
console.log(arr2)  // [9, 16, 36]

提示
原数组不变
回答内容

var newArr = [];
for(var i = 0; i < arr.length; i++){
newArr[i] = arr[i] * arr[i];
}
return newArr;
打分
评语

可以使用 map
题干

如下代码的输出？为什么？

var x = 10;
bar() 
function bar(){
  var x = 30;
  function foo(){
    console.log(x) 
  }
  foo();
}

回答内容

// 30
function foo() {
console.log(x)
}里面没有x的赋值，向上找var x=30,所以是30.
打分
评语
题干

如下代码的输出？为什么？

var a = 1
function fn1(){
  function fn2(){
    console.log(a)
  }
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn() //输出多少

回答内容

// 2
function fn2(){
console.log(a)
}里没有赋值，向上找，fn1里有var a=2,所以是2
打分
评语
题干

如下代码的输出？为什么？

var a = 1
function fn1(){
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
function fn2(){
  console.log(a)
}
var fn = fn1()
fn() //输出多少

回答内容

//1
function fn2(){
console.log(a)
}里没有赋值，向上找，全局变量里var a=1,所以是1
打分
评语
题干

如下代码的输出？为什么？

var a = 1
function fn1(){

  function fn3(){
    function fn2(){
      console.log(a)
    }
    fn2()
    var a = 4
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn() //输出多少

回答内容

// undefined
function fn2(){
console.log(a)
}里面没有，向上找，fn3里虽然有var a=4,对自身fn3没有影响，但对内嵌函数有影响。
声明的最终目的是为了提前使用，即在定义之前使用，如果不需要提前使用就没有单独声明的必要，变量是如此，函数也是如此，所以声明不会分配存储空间，只有定义时才会分配存储空间。函数是单向线，从上向下解析的。
打分
评语
题干

如下代码的输出？为什么？

var obj1 = {a:1, b:2};
var obj2 = {a:1, b:2};
console.log(obj1 == obj2);
console.log(obj1 = obj2);
console.log(obj1 == obj2);

回答内容

console.log(obj1 == obj2);
//false 因为obj1和obj2的指针所指向的在堆中的地址不一样
console.log(obj1 = obj2);
// {a:1,b:2} 将obj2赋值给obj1
console.log(obj1 == obj2);
//由于obj2赋值给obj1,两个对象所指向的在堆中的地址一致
打分
评语
题干

如下代码的输出？为什么？

var a = 1
var c = { name: 'jirengu', age: 2 }

function f1(n){
  ++n
}
function f2(obj){
  ++obj.age
}

f1(a) 
f2(c) 
f1(c.age) 
console.log(a) 
console.log(c)

回答内容

1  //全局变量
[object Object] {
  age: 3,
  name: "jirengu"
}  //全局对象，向上找是var c = { name: 'jirengu', age: 2 },而f2(c) ，函数执行 ++obj.age，所以 age: 3。

打分
评语
题干

写一篇关于作用域链的博客，不少于200字，附上博客链接
回答内容

http://www.jianshu.com/p/22f4115d01e6
打分
评语
题干

写一个深拷贝函数。
回答内容

function deepCopy(oldObj) {
var newObj = {};
for(var key in oldObj) {
if(typeof oldObj[key] === 'object') {
newObj[key] = deepCopy(oldObj[key]);
}else{
newObj[key] = oldObj[key];
}
}
return newObj;
}
打分
评语

typeof null 也是 object

<j-panel-body data-v-1a8c3c17="" class="panelBody"><form data-v-1a8c3c17="" class="el-form">

  1. <label class="el-form-item__label" style="width: 6em;">题干</label>

    立即执行函数表达式是什么？有什么作用？

    <label class="el-form-item__label" style="width: 6em;">回答内容</label>

    (function(){alert('我是匿名函数')}())

    创建一个独立的作用域。
    这个作用域里面的变量，外面访问不到（即避免「变量污染」）。

    <label class="el-form-item__label" style="width: 6em;">打分</label>

    <label class="el-form-item__label" style="width: 6em;">评语</label>

    ok

  2. <label class="el-form-item__label" style="width: 6em;">题干</label>

    求n!，用递归来实现。

    <label class="el-form-item__label" style="width: 6em;">回答内容</label>

    function factorial(n){
    if(n === 1){
    return 1
    }
    return n * factorial(n-1)
    }
    factorial(3) //6

    <label class="el-form-item__label" style="width: 6em;">打分</label>

    <label class="el-form-item__label" style="width: 6em;">评语</label>

    没有考虑 n为0 的情况

  3. <label class="el-form-item__label" style="width: 6em;">题干</label>

    以下代码输出什么？

        function getInfo(name, age, sex){
        console.log('name:',name);
        console.log('age:', age);
        console.log('sex:', sex);
        console.log(arguments);
        arguments[0] = 'valley';
        console.log('name', name);
    }

    getInfo('饥人谷', 2, '男');
    getInfo('小谷', 3);
    getInfo('男');

    <label class="el-form-item__label" style="width: 6em;">回答内容</label>

    "name:"
    "饥人谷"
    "age:"
    2
    "sex:"
    "男"
    [object Arguments] {
    0: "饥人谷",
    1: 2,
    2: "男"
    }
    "name"
    "valley"
    "name:"
    "小谷"
    "age:"
    3
    "sex:"
    undefined
    [object Arguments] {
    0: "小谷",
    1: 3
    }
    "name"
    "valley"
    "name:"
    "男"
    "age:"
    undefined
    "sex:"
    undefined
    [object Arguments] {
    0: "男"
    }
    "name"
    "valley"

    <label class="el-form-item__label" style="width: 6em;">打分</label>

    <label class="el-form-item__label" style="width: 6em;">评语</label>

  4. <label class="el-form-item__label" style="width: 6em;">题干</label>

    写一个函数，返回参数的平方和？

       function sumOfSquares(){
   }
   var result = sumOfSquares(2,3,4)
   var result2 = sumOfSquares(1,3)
   console.log(result)  //29
   console.log(result2)  //10

    <label class="el-form-item__label" style="width: 6em;">回答内容</label>

    function sumOfSquares(){
    var sum=0;
    for(var i=0;i<arguments.length;i++){
    sum=sum+arguments[i]*arguments[i];
    }
    return sum;
    }
    var result = sumOfSquares(2,3,4)
    var result2 = sumOfSquares(1,3)
    console.log(result) //29
    console.log(result2) //10

    <label class="el-form-item__label" style="width: 6em;">打分</label>

    <label class="el-form-item__label" style="width: 6em;">评语</label>

  5. <label class="el-form-item__label" style="width: 6em;">题干</label>

    如下代码的输出？为什么？

        console.log(a);
    var a = 1;
    console.log(b);

    <label class="el-form-item__label" style="width: 6em;">回答内容</label>

    console.log(a); // undefined。因为下面的var a=1相当于var a，a=1。即声明了变量a也给a赋值了，因为变量提升的原因，所以在执行第一句时知道了a已经被声明但是却没有被赋值。所以显示为undefined。
    var a = 1;
    console.log(b);// 报错，b is not defined。代码中没有声明变量b也没有对其赋值，所以显示为b is not defined，而不是undefined。

    <label class="el-form-item__label" style="width: 6em;">打分</label>

    <label class="el-form-item__label" style="width: 6em;">评语</label>

  6. <label class="el-form-item__label" style="width: 6em;">题干</label>

    如下代码的输出？为什么？

        sayName('world');
    sayAge(10);
    function sayName(name){
        console.log('hello ', name);
    }
    var sayAge = function(age){
        console.log(age);
    };

    <label class="el-form-item__label" style="width: 6em;">回答内容</label>

    // hello world
    // sayAge is not a function。error,因为下面这个是函数表达式，而函数表达式不会声明提前，所以sayAge(10)在前面调用是无效的。

    <label class="el-form-item__label" style="width: 6em;">打分</label>

    <label class="el-form-item__label" style="width: 6em;">评语</label>

  7. <label class="el-form-item__label" style="width: 6em;">题干</label>

    写一个函数squireArr，其参数是一个数组，作用是把数组中的每一项变为原值的平方

    var arr = [3, 4, 6]
function squireArr( arr ){
  //补全
}
squireArr(arr)
console.log(arr)  // [9, 16, 36]

    <label class="el-form-item__label" style="width: 6em;">提示</label>

    arr 被修改了

    <label class="el-form-item__label" style="width: 6em;">回答内容</label>

    for(var i = 0; i < arr.length; i++){
    arr[i] = arr[i] * arr[i];
    }//补全

    <label class="el-form-item__label" style="width: 6em;">打分</label>

    <label class="el-form-item__label" style="width: 6em;">评语</label>

  8. <label class="el-form-item__label" style="width: 6em;">题干</label>

    如下代码的输出？为什么？

    var x = 10
bar() 
function foo() {
  console.log(x)
}
function bar(){
  var x = 30
  foo()
}

    <label class="el-form-item__label" style="width: 6em;">回答内容</label>

    //10,
    function foo() {
    console.log(x)
    }里面没有x的赋值，向上找，全局变量里有赋值，所以是10.

    <label class="el-form-item__label" style="width: 6em;">打分</label>

    <label class="el-form-item__label" style="width: 6em;">评语</label>

  9. <label class="el-form-item__label" style="width: 6em;">题干</label>

    写一个函数squireArr，其参数是一个数组，返回一个新的数组，新数组中的每一项是原数组对应值的平方，原数组不变

    var arr = [3, 4, 6]
function squireArr( arr ){
  //补全
}
var arr2 = squireArr(arr)
console.log(arr)  // [3, 4, 6]
console.log(arr2)  // [9, 16, 36]

    <label class="el-form-item__label" style="width: 6em;">提示</label>

    原数组不变

    <label class="el-form-item__label" style="width: 6em;">回答内容</label>

    var newArr = [];
    for(var i = 0; i < arr.length; i++){
    newArr[i] = arr[i] * arr[i];
    }
    return newArr;

    <label class="el-form-item__label" style="width: 6em;">打分</label>

    <label class="el-form-item__label" style="width: 6em;">评语</label>

    可以使用 map

  10. <label class="el-form-item__label" style="width: 6em;">题干</label>

如下代码的输出？为什么？

```
var x = 10;
bar() 
function bar(){
  var x = 30;
  function foo(){
    console.log(x) 
  }
  foo();
}

```

<label class="el-form-item__label" style="width: 6em;">回答内容</label>

// 30
function foo() {
console.log(x)
}里面没有x的赋值，向上找var x=30,所以是30.

<label class="el-form-item__label" style="width: 6em;">打分</label>

<label class="el-form-item__label" style="width: 6em;">评语</label>
  1. <label class="el-form-item__label" style="width: 6em;">题干</label>
如下代码的输出？为什么？

```
var a = 1
function fn1(){
  function fn2(){
    console.log(a)
  }
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn() //输出多少

```

<label class="el-form-item__label" style="width: 6em;">回答内容</label>

// 2
function fn2(){
console.log(a)
}里没有赋值，向上找，fn1里有var a=2,所以是2

<label class="el-form-item__label" style="width: 6em;">打分</label>

<label class="el-form-item__label" style="width: 6em;">评语</label>
  1. <label class="el-form-item__label" style="width: 6em;">题干</label>
如下代码的输出？为什么？

```
var a = 1
function fn1(){
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
function fn2(){
  console.log(a)
}
var fn = fn1()
fn() //输出多少

```

<label class="el-form-item__label" style="width: 6em;">回答内容</label>

//1
function fn2(){
console.log(a)
}里没有赋值，向上找，全局变量里var a=1,所以是1

<label class="el-form-item__label" style="width: 6em;">打分</label>

<label class="el-form-item__label" style="width: 6em;">评语</label>
  1. <label class="el-form-item__label" style="width: 6em;">题干</label>
如下代码的输出？为什么？

```
var a = 1
function fn1(){

  function fn3(){
    function fn2(){
      console.log(a)
    }
    fn2()
    var a = 4
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn() //输出多少

```

<label class="el-form-item__label" style="width: 6em;">回答内容</label>

// undefined
function fn2(){
console.log(a)
}里面没有，向上找，fn3里虽然有var a=4,对自身fn3没有影响，但对内嵌函数有影响。
声明的最终目的是为了提前使用，即在定义之前使用，如果不需要提前使用就没有单独声明的必要，变量是如此，函数也是如此，所以声明不会分配存储空间，只有定义时才会分配存储空间。函数是单向线，从上向下解析的。

<label class="el-form-item__label" style="width: 6em;">打分</label>

<label class="el-form-item__label" style="width: 6em;">评语</label>
  1. <label class="el-form-item__label" style="width: 6em;">题干</label>
如下代码的输出？为什么？

```
var obj1 = {a:1, b:2};
var obj2 = {a:1, b:2};
console.log(obj1 == obj2);
console.log(obj1 = obj2);
console.log(obj1 == obj2);

```

<label class="el-form-item__label" style="width: 6em;">回答内容</label>

console.log(obj1 == obj2);
//false 因为obj1和obj2的指针所指向的在堆中的地址不一样
console.log(obj1 = obj2);
// {a:1,b:2} 将obj2赋值给obj1
console.log(obj1 == obj2);
//由于obj2赋值给obj1,两个对象所指向的在堆中的地址一致

<label class="el-form-item__label" style="width: 6em;">打分</label>

<label class="el-form-item__label" style="width: 6em;">评语</label>
  1. <label class="el-form-item__label" style="width: 6em;">题干</label>
如下代码的输出？为什么？

```
var a = 1
var c = { name: 'jirengu', age: 2 }

function f1(n){
  ++n
}
function f2(obj){
  ++obj.age
}

f1(a) 
f2(c) 
f1(c.age) 
console.log(a) 
console.log(c)

```

<label class="el-form-item__label" style="width: 6em;">回答内容</label>

```
1  //全局变量
[object Object] {
  age: 3,
  name: "jirengu"
}  //全局对象，向上找是var c = { name: 'jirengu', age: 2 },而f2(c) ，函数执行 ++obj.age，所以 age: 3。

```

<label class="el-form-item__label" style="width: 6em;">打分</label>

<label class="el-form-item__label" style="width: 6em;">评语</label>
  1. <label class="el-form-item__label" style="width: 6em;">题干</label>
写一篇关于作用域链的博客，不少于200字，附上博客链接

<label class="el-form-item__label" style="width: 6em;">回答内容</label>

[http://www.jianshu.com/p/22f4115d01e6](http://www.jianshu.com/p/22f4115d01e6)

<label class="el-form-item__label" style="width: 6em;">打分</label>

<label class="el-form-item__label" style="width: 6em;">评语</label>
  1. <label class="el-form-item__label" style="width: 6em;">题干</label>
写一个深拷贝函数。

<label class="el-form-item__label" style="width: 6em;">回答内容</label>

function deepCopy(oldObj) {
var newObj = {};
for(var key in oldObj) {
if(typeof oldObj[key] === 'object') {
newObj[key] = deepCopy(oldObj[key]);
}else{
newObj[key] = oldObj[key];
}
}
return newObj;
}

<label class="el-form-item__label" style="width: 6em;">打分</label>

<label class="el-form-item__label" style="width: 6em;">评语</label>

typeof null 也是 object

</form></j-panel-body>

相关文章

  • 进阶4：JS作用域链 & JS引用类型

    题干 立即...

  • JS作用域链 & JS引用类型

    立即执行函数表达式是什么？有什么作用？ 在 Javascript 中，圆括号()是一种运算符，跟在函数名之后，表示...

  • JS作用域的练习

    Js作用域练习demo1 Js作用域练习demo2 JS作用域练习demo3 JS作用域练习demo4 JS作用域...

  • 浅谈JS作用域链

    浅谈JS作用域链 作用域 作用域（scope）就是变量访问规则的有效范围。作用域外，无法引用作用域内的变量；离开作...

  • JS作用域链&引用类型

    一、立即执行函数表达式是什么？有什么作用？ 上面这种写法就是立即执行函数表达式。以圆括号开头，js就会认为这是一个...

  • 3小时速学JS原理

    内容：前端JS部分知识点原理速讲，内容包括且不限于 声明前置 引用类型 函数作用域链 闭包 跨域 面向对象 继承 ...

  • ! js手写实践

    1.闭包2.js执行机制3.new发生了什么4.防抖和节流5.js原型和原型链6.js作用域和作用域链7.深拷贝、...

  • JS 作用域链、导入导出

    1. JS 的作用域链 作用域在 JS 中表示变量的可访问性和可见性。JS 作用域有 3 种：1. 全局作用域；2...

  • 前端JS基础一（基础知识）

    基础知识 js基础三座大山 原型 原型链 作用域 闭包 异步 单线程 知识点 1.变量类型：值类型和引用类型（指针...

  • 干货！月薪80k前端大佬面试笔记：JS闭包解析！

    三点注意事项 JS没有块级作用域，只有全局作用域和局部作用域(函数作用域)。 JS中的作用域链，内部的作用域可以访...

网友评论

      本文标题：进阶4：JS作用域链 & JS引用类型

      本文链接：https://www.haomeiwen.com/subject/dwjjixtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|进阶4：JS作用域链 & JS引用类型|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！