首页 > 编程语言 >JavaScript 中最难理解的三个知识点,面试命中率 99% !

JavaScript 中最难理解的三个知识点,面试命中率 99% !

时间:2025-01-04 09:59:23浏览次数:3  
标签:function 知识点 console name JavaScript 99% var obj log

原型与原型链

说到原型,就不得不提一下构造函数,首先我们看下面一个简单的例子:

function Dog(name,age){
    this.name = name;
    this.age = age;
}

let dog1 = new Dog("哈士奇",3);
let dog2 = new Dog("泰迪",2);

首先创造空的对象,再让 this 指向这个对象,通过 this.name 进行赋值,最终返回 this,这其实也是 new 一个对象的过程。

其实:

  • let obj = {} 是 let obj = new Object() 的语法糖;
  • let arr = [] 是 let arr = new Array() 的语法糖;
  • function Dog(){…} 是 let Dog = new Fucntion() 的语法糖。

1.那什么是原型那?
在 js 中,所有对象都是 Object 的实例,并继承 Object.prototype 的属性和方法,但是有一些是隐性的。
我们来看一下原型的规则:

var obj = {};
obj.attribute = "三座大山";
var arr = [];
arr.attribute = "三座大山";
function fn1 () {}
fn1.attribute = "三座大山";
  1. 所有的引用类型(包括数组,对象,函数)都有隐性原型属性( proto ), 值也是一个普通的对象。
console.log(obj.__proto__);
  1. 所有的函数,都有一个 prototype 属性,值也是一个普通的对象。
console.log(obj.prototype);
  1. 所有的引用类型的 proto 属性值都指向构造函数的 prototype 属性值。
console.log(obj.__proto__ === Object.prototype); // true
  1. 当试图获取对象属性时,如果对象本身没有这个属性,那就会去他的 proto(prototype)中去寻找。
function Dog(name){
   this.name = name;
}

Dog.prototype.callName = function (){
   console.log(this.name,"wang wang");
}

let dog1 = new Dog("Three Mountain");
dog1.printName = function (){
   console.log(this.name);
}

dog1.callName();  // Three Mountain wang wang
dog1.printName(); // Three Mountain

原型链:如下图。

在这里插入图片描述

我找一个属性,首先会在 f.proto 中去找,因为属性值为一个对象,那么就会去 f.proto.proto 去找,同理如果还没找到,就会一直向上去查找,直到结果为 null 为止。这个串起来的链即为原型链。

作用域及闭包
讲到作用域,你会想到什么?当然是执行上下文。每个函数都有自己的 excution context,和 variable object。这些环境用于储存上下文中的变量,函数声明,参数等。只有函数才能制造作用域。

PS:for if else 不能创造作用域。

console.log(a) ; // undefined
var a = 1;
//可理解为
var a;
console.log(a);  // undefined
a = 1;

执行 console.log 时,a 只是被声明出来,并没有赋值;所以结果当然是 undefined。本质上来说,在 js 里 this 是一个指向函数执行环境的指针。this 永远指向最后调用它的对象,并且在执行时才能获取值,定义是无法确认他的值。

var a = {
    name : "A",
    fn : function (){
        console.log (this.name)
    }
}

a.fn() // this === a a 调用了fn() 所以此时this为a

a.fn.call ({name : "B"}) // this === {name : "B"} 使用call(),将this的值指定为{name:"B"}

var fn1 = a.fn

fn1() // this === window虽然指定fn1 = a.fn,但是调用是有window调用,所以this 为window

this 有多种使用场景,下面我会主要介绍 4 个使用场景:

  1. 作为构造函数执行
function  Student(name,age) {
    this.name = name  // this === s
    this.age = age    // this === s
    //return  this
}

var s = new Student("前端开发爱好者",30)

首先 new 字段会创建一个空的对象,然后调用 apply() 函数,将 this 指向这个空对象。这样的话,函数内部的 this 就会被空对象代替。

2.作为普通函数执行

function  fn () {
    console.log (this)  // this === window
}

fn ()

3.作为对象属性执行

var obj = {
    name : "A",
    printName : function () {
        console.log (this.name)  // this === obj
    }
}

obj.printName ()

4.call(),apply(),bind() 三个函数可以修改 this 的指向,具体请往下看:

var name = "小明" , age = "17"

var obj = {
    name : "安妮",
    objAge : this.age,
    fun : function () {
            console.log ( this.name + "今年" + this.age )
        }
}
console.log(obj.objAge) // 17
obj.fun() // 安妮今年undefined
var name = "小明" , age = "17"
var obj = {
    name : "安妮",
    objAge :this.age,
    fun : function (like,dislike) {
              console.log (this.name + "今年" + this.age ,"喜欢吃" + like + "不喜欢吃" + dislike)
           }
    }

var a = { name : "Jay", age : 23 }

obj.fun.call(a,"苹果","香蕉") // Jay今年23 喜欢吃苹果不喜欢吃香蕉
obj.fun.apply(a,["苹果","香蕉"]) // Jay今年23 喜欢吃苹果不喜欢吃香蕉
obj.fun.bind(a,"苹果","香蕉")() // Jay今年23 喜欢吃苹果不喜欢吃香蕉

首先 call,apply,bind 第一个参数都是 this 指向的对象,call 和 apply 如果第一个参数指向 null 或 undefined 时,那么 this 会指向 windows 对象。
call,apply 都是改变上下文中的 this,并且是立即执行的。
bind 方法可以让对应的函数想什么时候调用就什么时候调用。

闭包
闭包的概念很抽象,看下面的例子你就会理解什么叫闭包了:

function a(){
  var n = 0;
  this.fun = function () {
    n++;
    console.log(n);
  };
}

var c = new a();

c.fun();  //1
c.fun();  //2

闭包就是能够读取其他函数内部变量的函数。在 js 中只有函数内部的子函数才能读取局部变量。所以可以简单的理解为:定义在内部函数的函数。

用途主要有两个:

  • 前面提到的,读取函数内部的变量。
  • 让变量值始终保持在内存中。

异步和单线程
我们先感受下异步。

console.log("start");
setTimeout(function () {
    console.log("medium");
}, 1000);
console.log("end");

使用异步后,打印的顺序为 start->end->medium 。因为没有阻塞。
为什么会产生异步呢?

首先因为 js 为单线程,也就是说 CPU 同一时间只能处理一个事务。得按顺序,一个一个处理。如上例所示,

如上例所示,

  • 第一步:执行第一行打印 “start”;
  • 第二步:执行 setTimeout,将其中的函数分存起来,等待时间结束后执行;
  • 第三步:执行最后一行,打印 “end”;
  • 第四部:处于空闲状态,查看暂存中,是否有可执行的函数;
  • 第五步:执行分存函数。

为什么 js 引擎是单线程?

js 的主要用途是与用户互动,以及操作 DOM,这决定它只能是单线程。例:一个线程要添加 DOM 节点,一个线程要删减 DOM 节点,容易造成分歧。为了更好使用多 CPU,H5 提供了 web Worker 标准,允许 js 创建多线程,但是子线程受到主线程控制,而且不得操作 DOM。

任务列队
单线程就意味着,所有的任务都要排队,前一个结束,才会执行后面的任务。如果列队是因为计算量大,CPU 忙不过来,倒也算了。但是更多的时候,CPU 是闲置的,因为 IO 设备处理得很慢,例如 ajax 读取网络数据。js 设计者便想到,主线程完全可以不管 IO 设备,将其挂起,然后执行后面的任务。等后面的任务结束掉,在反过头来处理挂起的任务。

  • 所有的同步任务都在主线程上执行,形成一个执行栈。
  • 除了主线程之外,还存在一个任务列队,只要任务有了运行结果,就在任务列队中植入一个时间。
  • 主线程完成所有任务,就会读取队列任务,并将其执行。
  • 重复上面三步。
  • 只要主线程空了,就会读取任务列队,这就是 js 的运行机制,也被称为 event loop(事件循环)。

标签:function,知识点,console,name,JavaScript,99%,var,obj,log
From: https://blog.csdn.net/qq_16242613/article/details/144870864

相关文章

  • #C02L02P01. C02.L02.一维数组最值问题.知识点1.求最大值
    从键盘读入n(1<=n<=100)个正整数,输出最大值。算法分析假设一个最大值maxx=0;maxx依次跟数组中的元素进行比较;如果该数组元素大于maxx,则将该数组元素值赋值给maxx;maxx即为该数组中的最大值。参考代码#include<bits/stdc++.h>usingnamespacestd;intn,x[101......
  • IDEA 2024.3.1.1完整的安装教程(激活至2099年,以及常见问题处理)
    卸载老版本IDEA首先,如果小伙伴的电脑上有安装老版本的IDEA,需要将其彻底卸载掉,如下所示(没有安装则不用管,直接安装即可):TIP:如果你之前使用过本站提供的 激活到2025年版本脚本,需要执行对应卸载脚本/适用2024版本/JetBrains2023最新全家桶/jetbra/scripts/uninstall-a......
  • JavaScript 基础2
    js的运算符算数运算符+相加求和,如果用在字符串则是拼接-相减求差*相乘求积/相除求商%模除求余具体用法如下letnum=154letnum2=15document.write(num+num2)document.write(`<br>`)document.write(num-num2)document.write(`<br>`)document.write(num*num2)......
  • 各省碳排放面板数据(1990-2022年)
    碳排放是指人类活动产生的二氧化碳(CO2)等温室气体释放到大气中的过程。通过划分排放源的范围以避免重复计算的思想,由世界资源研究所在关于企业温室气体排放清单编制的指南中首次提出。城市碳排放核算边界界定借鉴该思想,可分为3大范围一、数据介绍数据名称:各省碳排放数据......
  • HTML5期末大作业:基于HTML+CSS+JavaScript仿蘑菇街购物商城设计毕业论文源码 (1)
    常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题......
  • 大二Web课程设计——张家界旅游网站设计与实现(HTML+CSS+JavaScript)
    ......
  • 浏览器在渲染时遇到javascript文件要怎么处理?
    在前端开发中,当浏览器在渲染网页时遇到JavaScript文件,它会按照一系列步骤来处理这些文件。以下是浏览器处理JavaScript文件的主要步骤:解析HTML文档:浏览器从服务器下载HTML文档,并开始解析它。当浏览器遇到<script>标签时,它会根据标签的属性(如src、async、defer、t......
  • javascript中if条件后不接大括号的用法【避坑】
    项目场景:小王在网上学习编程时,一边看视频一边自己对着敲代码,结果出现问题了,查了一下午没查出来。平时不注意细节,多次看到别人if条件语句后面没写大括号,以为写不写大括号都一样,而自己习惯写上大括号。if(this.currentMovingDirection==MovingDirectioin.down)......
  • 20道Redis面试题核心技术知识点
    1、什么是Redis,Redis有哪些特点?2、Redis有哪些数据结构?3、一个字符串类型的值能存储最大容量是多少?4、能说一下Redis每种数据结构的使用场景吗?......
  • JavaScript代码安全性提升:选择和使用JS混淆工具的指南
    https://toolin.cn/jsfuck https://maimai.cn/article/detail?fid=1827257627&efid=382Pa05uQ_i7jAl6rmq5tg 在Web开发中,JavaScript是一种常用的脚本语言,然而,由于其代码容易被他人轻易获取和修改,为了保护JavaScript代码的安全性和版权,我们需要使用JS混淆工具。本文将介绍什......