JsBOM和DOM、var let const、变量提升函数提升、闭包、回调函数、原型原型链

最新推荐文章于 2024-07-31 16:33:32 发布

m旧裤子

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量1.2k

点赞数 2

分类专栏： Javascript 文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/m0_53328239/article/details/123443546

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

DOM和BOM

DOM是操作文档出现的API，document为其中的一个对象；

BOM是为了操作浏览器出现的API，window为其中的一个对象；

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KDCgSu5r-1647066949929)(C:\Users\wanglicong\AppData\Roaming\Typora\typora-user-images\image-20220307113012498.png)]$

简单来说BOM就是操作上图A区的，DOM就是操作上图B区的

常用的BOM对象为：
- window（重要）window 代表浏览器窗口
- Navigater,封装了浏览器的信息
- screen代表屏幕尺寸
- location 代表当前页面的URL信息。
- history 代表浏览器的历史记录
  
  常用的DOM对象为：
- document代表当前的页面，HTML DOM文档树
var let const

首先应该知道什么是全局变量和局部变量。

全局变量就是在函数外声明的，作用域是全局的。

局部变量就是在函数内声明的，作用域为函数内部。

Es6新增了块级作用域，let可以实现块级作用域
```
{
    let a=1;
}
console.log(a); //a is not defined

{
    var a=1
}
console.log(a)// 1
```
var和let的相同点
- var和let在函数内部声明都是具有局部作用域的
- var和let在函数外和在块级作用域外都是具有全局作用域的
var和let的不同点
- var不可以实现块级作用域，let可以把
- var可以被再次声明，let不能被再次声明
- var具有变量提升的功能，let不具有变量提升的功能
const定义常量

const定义的常量既不能重新声明也不能重新赋值，且必须进行初始化。

但是用const定义的数组或对象当中，可以进行单个属性值的更改，但也不能从新赋值整个数组或对象。
```
const per={
    name:"cong",
    age:18,
    height:180
}
per.age=17;
console.log(per.age);//17
	
per={
    name:"con",
    age:19,
    hight:183
}//错误的方式
```
变量提升函数提升

变量提升
```
console.log(a)//undefined
var a=1;
```
这两句代码中就相当进行了代码提升，与下面代码相同
```
var a;
console.log(a);
a=1;
```
函数定义的三种方法
1. 函数声明
```
function myfunction(){
    alert(...);
}
//调用
myfunction();
```
2. 函数表达式
```
var myfunction=function(){
    alert(...)
}
//调用
 myfunction();
```
3. 构造函数(不常用)
```
var myfunction=new function("alert(...)");
//调用
myfunction();
```
  函数提升
  
  在函数提升中，函数声明的形式会被提升，而函数表达式不会被提升
```
myfunction1();
myfunction2();
function myfunction1(){
    alert(111);
}
var myfunction2=function(){
    alert(222);
}
//111
// myfunction2 is not a function
```
  相当于
```
function myfunction1(){
alert(111);
}
myfunction1();
var myfunction2;
myfunction2();
myfunction2=function(){
    alert(222);
}
//111
// myfunction2 is not a function
```
4. 回调函数
  
  首先了解同步异步的概念。
  
  在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。
  
  简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。
  
  回调函数中就有异步的实践。
  
  什么是回调函数？
  
  A “callback” is any function that is called by another function which takes the first function as a parameter. （在一个函数中调用另外一个函数就是callback）
```
var a=0;
function myfunction(x){
    console.log(x);
}
function timer(time){
    setTimeout(function(){
        a=6;
    },time);
}

console.log(a);
timer(3000);
bb(a);

//结果为0 0
```
  这是因为js中的异步功能，程序在执行到timer函数后，我们希望它等三秒再往下执行，但js是异步的，它不会去等这三秒，而是直接跳出程序往下执行。这就需要我们来使用回调函数了。
```
var a=0;
function myfunction(x){
    console.log(x);
}
function timer(time,callback){
    setTimeout(function(){
        a=6;
        callback(a);
    },time);
}

console.log(a);
timer(3000,myfunction);

//结果为0 6
```
  这下把函数做为一个参数以后，程序就需要在执行函数时等待三秒之后再执行myfunction函数
  
  所以回调的更详细概念就来了：
  
  一般而言，函数的形参是指由外往内向函数体传递变量的入口，但此处加了callback后则完全相反，它是指函数体在完成某种使命后调用外部函数的出口！这时候应该明白什么叫"回调"了吧，也就是回头调用外部函数的意思。
5. 闭包
```
function out(){
    var a=1;
    function in(){
        alert(a);
    }
}
out();//1
```
  上面的代码就是闭包，在我的理解中闭包就是能够读取其他函数内部的变量的函数（「函数」和「函数内部能访问到的变量」的总和，就是一个闭包。）
  
  闭包的用途：
  - 读取函数内部的变量
  - 让变量的值始终保持在内存中
6. 原型原型链
  - 在javascript中每一个函数都有一个prototype属性，指向函数的原型对象
```
function per(){
    age:3
}
per.prototype.name="cong";//为函数的原型对象创建一个属性
var per1=new per();      //创建一个实例对象
console.log(per1.name); //cong
```
  由上面代码可知道per1的原型对象就是
  - 每个对象也都会有一个__proto__属性，指向该对象的原型
```
function per(){
    
}
var per1=new per();
console.log(per1.__proto__ === per.prototype);//true
```
  - 每一个原型都有一个constructor属性，指向该对象的构造函数
```
function per(){
    
}
console.log(per===per.prototype.constructor);//true
```
  当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止，object为所有对象的顶层。而这样一条的不断向上查找原型的链条就叫原型链。
  
  红色线条就是原型链

m旧裤子

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JsBOM和DOM、var let const、变量提升函数提升、闭包、回调函数、原型原型链

DOM和BOMDOM是操作文档出现的API，document为其中的一个对象；BOM是为了操作浏览器出现的API，window为其中的一个对象；简单来说BOM就是操作上图A区的，DOM就是操作上图B区的常用的BOM对象为：window（重要）window 代表浏览器窗口Navigater,封装了浏览器的信息screen代表屏幕尺寸location 代表当前页面的URL信息。history 代表浏览器的历史记录常用的DOM对象为：document代表..
复制链接

扫一扫