js面试题知识点全解(一作用域和闭包)

问题:

1.说一下对变量提升的理解

2.说明this几种不同的使用场景

3.如何理解作用域

4.实际开发中闭包的应用

知识点:

js没有块级作用域
只有函数和全局作用域,如下代码:

if(true){
        var name=‘killua‘ //把name定义在块里和放在外面是一样的,等同于在外面声明一个变量name,在块内给name赋值
    }//同等于下面的代码
    //建议用下面方式写
    var name
    if(true){
        name=‘killua‘
    }
    console.log(name) //打印出来killua

    //函数和全局作用域
    var a=100 //定义全局作用域变量
    function fn(){
        var a=200  //在函数中定义变量不会污染外面定义的变量,只能函数里面用
        console.log(‘fn‘, a)
    }

当前作用域没有定义某个变量,所以要去它的父级作用域找,这样的就是作用域链

//作用域链例子1
var a = 100 //自由变量
function fn(){
    var b = 200
    console.log(a)
    console.log(b)
}
fn()
//作用域链例子2
var x =100
function F1(){
    var y = 200
    function F2(){
        var z =300
        console.log(x)
        console.log(y)
        console.log(z)
    }
    F2()
}
F1()

作用域和闭包-执行上下文

console.log(a); //undefined
var a=10;  //这种写法,因为a是全局变量。会把var a;提到最前面
/*以上代码等同于:
var a;
console.log(a);
a=10;*/

fn("killua");
function fn(name){
    console.log(name)
}  //函数声明会提前到最前面,所以可以先执行函数,再声明函数也可以

fn(‘killua‘)
function fn(name){
    console.log(this) //
    console.log(arguments) //参数
    age=10
    console.log(name, age)
    var age

    bar(100)
    function bar(num){
        console.log(num)
    } //在函数内也会把函数声明,变量声明提到函数内部最前面
} //函数执行完输出
    //killua 10
    //100

this介绍:

this要在执行时才能确认,定义时无法确认

var a= {
    name = ‘killua‘,
    fn: function(){
        console.log(this.name)
    }
}
a.fn() //this===a

a.fn.call({name:‘L‘}) //this==={name:‘L‘}

var fn1 =a.fn
fn1() //this===window

构造函数中的this

1 function Foo(name){
2     this.name = name
3 }
4 var f = new Foo(‘killua‘) //实例化

对象中的this

1 var obj = {
2     name:‘L‘
3     printName: function(){
4         console.log(this.name)
5     }
6 }
7 obj.printName() //作为对象属性来执行,this指向obj这个对象

普通函数中的this

1 function fn(){
2     console.log(this) //作为一个普通函数执行,this === window
3 }
4 fn()

call apply bind

1 function fn1(name,age){
2     console.log(this)
3 }
4 fn1.call({x:10},"killua",20) //call调用一个对象的一个方法,以另一个对象替换当前对象,这里把this替换成{x:10}
5 fn2.apply({x:10},[‘killua‘,20]) //apply和call方法一样,只是用数组的方式传递参数,call比较常用
6 var  fn3 = function(name,age){
7     console.log(this)
8 }.bind({y:200}) //.bind()方法和前两个一样,把this替换成{y:200},但是必须用在函数表达式,不能用在普通函数
9 fn3(‘killua‘,20)

以上知识点总结出题目内容

说一下对变量提升的理解:
1.变量定义 //变量声明会提前
2.函数声明(注意和函数表达式的区别) //函数声明提升

说明this几种不同的使用场景:
1.作为构造函数执行
2.作为对象属性执行
3.作为普通函数执行
4.call apply bind

如何理解作用域:
1.自由变量
2.作用域链,即自由变量的查找
3.闭包的两个场景(持续更新中...)

时间: 2024-12-07 15:44:38

js面试题知识点全解(一作用域和闭包)的相关文章

js面试题知识点全解(一闭包)

闭包使用场景:1.函数作为返回值,如下场景 1 function F1(){ 2 var a = 100 //自由变量 3 //返回一个函数(函数作为返回值) 4 return function(){ 5 console.log(a) //a是定义的时候 的作用域,不是执行的时候的作用域,为100 6 } 7 } 8 //f1得到一个函数 9 var f1 = F1() 10 var a = 200 //全局作用域,不影响函数内作用域 11 f1() 2.函数作为参数传递 1 function

js面试题知识点全解(一原型和原型链1)

1.如何准确判断一个变量是数组类型2.写一个原型链继承的例子3.描述new一个对象的过程4.zepto(或其他框架)源码中如何使用原型链知识点:1.构造函数2.构造函数-扩展3.原型规则和示例4.原型链5.instanceof 讲解: 构造函数:一般函数为大写字母开头的都是构造函数,如下: function Foo(name,age){ this.name=name this.age=age //return this }var f = new Foo('L',20) ; //构造函数形成实例,

Js中this机制全解

JavaScript中有很多令人困惑的地方,或者叫做机制. 但是,就是这些东西让JavaScript显得那么美好而与众不同. 比方说函数也是对 象.闭包.原型链继承等等,而这其中就包括颇让人费解的this机制. 不管是新手还是老手,不仔细深抠一下还真闹不明白this倒地咋回事捏. 今天,我们 就一起看一下this倒地咋回事,别再为了this发愁了. this是啥?         简言之,this是JavaScript语言中定义的众多关键字之一,它的特殊在于它自动定义于每一个函数域内,但是thi

《Java面试全解析》1000道面试题大全详解(转)

<Java面试全解析>1000道 面试题大全详解 本人是 2009 年参加编程工作的,一路上在技术公司摸爬滚打,前几年一直在上海,待过的公司有 360 和游久游戏,因为自己家庭的原因,放弃了阿里钉钉团队的 offer 回到了西安. 从 2015 年四月开始在一家上市公司担任研发经理的职位,至今也快 5 年了,一路上见了很多也面试了很多人技术人,大部分面试的结果很令我沮丧,这也是我出这本书的原因之一,帮助更多的人搞懂技术最核心的知识. 为了写好这个专栏内容,我先后拜访了一二十家互联网公司,与不同

解析js中作用域、闭包——从一道经典的面试题开始

如何理解js中的作用域,闭包,私有变量,this对象概念呢? 就从一道经典的面试题开始吧! 题目:创建10个<a>标签,点击时候弹出相应的序号 先思考一下,再打开看看 //先思考一下你会怎么写,是不是这样? 可是结果呢,弹出来的都是10,为啥? var i,a for(i=0;i<10;i++){ a=document.createElement('a') a.innerHTML=i+'<br>' a.addEventListener('click',function(eve

【前端芝士树】Vue.js面试题整理 / 知识点梳理

[前端芝士树] Vue.js 面试题整理 MVVM是什么? MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. View 代表UI 组件,它负责将数据模型转化成UI 展现出来. ViewModel 监听模型数据的改变和控制视图行为.处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View. 在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewM

php高级面试题知识点(转载)

php高级面试题知识点大全 时间:2016-01-26 06:36:22来源:网络 导读:php高级面试题知识点大全,本套面试题内容包括php魔术方法.php单点登录.linux基本命令.前端开发技术等,不错的php面试题. php高级工程师面试题 1,基本知识点http协议中几个状态码的含义:503 500 401 200 301 302...include require include_once require_once 的区别.php/mysql中几个版本的进化史,比如mysql4.0到

Node.js面试题:侧重后端应用与对Node核心的理解

Node是搞后端的,不应该被被归为前端,更不应该用前端的观点去理解,去面试node开发人员.所以这份面试题大全,更侧重后端应用与对Node核心的理解. node开发技能图解 node 事件循环机制 起源 node正风生火起,很多介绍却停留在入门阶段,无法投入生产 node相关的高质量面试题更是少之又少,很难全面考查应聘者的node能力 许多文章在讲第三方类库,可是这些库质量差距较大,一旦遇到问题怎么办 必需的,全面了解node核心才能成为一名合格的node开发人员 目标与原则 前后端兼顾,更侧重

node.js面试题大全-侧重后端应用与对Node核心的理解

Node是搞后端的,不应该被被归为前端,更不应该用前端的观点去理解,去面试node开发人员.所以这份面试题大全,更侧重后端应用与对Node核心的理解. github地址: https://github.com/jimuyouyou/node-interview-questions 注: 这人本人历时一星期完成的小作品,github里面对一些关键代码还有js源文件.直接node filename.js就可查看效果. 第一个版本,写的匆忙,能力有限,欢迎拍砖补充!后面持续更新会及时发布到github