中小型网站建设多少钱,小公司要不要建设网站,中国建设通,天津市房地产官网目录
一、js函数声明-function
第一种
第二种
第三种 二、this关键字
this使用场合
1.全局环境
2.构造函数
3.对象的方法
避免多层this
三、js的同步与异步
定时器
setTimeout和setInterval
同步与异步的例子
四、宏任务与微任务
分辨宏任务与微任务 一、js…目录
一、js函数声明-function
第一种
第二种
第三种 二、this关键字
this使用场合
1.全局环境
2.构造函数
3.对象的方法
避免多层this
三、js的同步与异步
定时器
setTimeout和setInterval
同步与异步的例子
四、宏任务与微任务
分辨宏任务与微任务 一、js函数声明-function
一共有三种方式
第一种
function命令后面是函数名函数名后面是一对圆括号里面是传入函数的参数。函数体放在大括号里面。
function print(a) {console.log(a);
}
上面的代码命名了一个print函数以后使用print()这种形式就可以调用相应的代码。
第二种
除了用function命令声明函数还可以采用变量赋值的写法。这种写法将一个匿名函数赋值给变量。这时这个匿名函数又称函数表达式,因为赋值语句的等号右侧只能放表达式。
var print function(s) {console.log(s);
};
第三种 Function构造函数。下面构造的两个函数是一样的只是方式不一样。Function构造函数接受三个参数除了最后一个参数是add函数的“函数体”其他参数都是add函数的参数。Function构造函数可以不使用new命令返回结果完全一样。
var add new Function(x,y,return x y
);function add(x, y) {return x y;
} 二、this关键字
this关键字是一个非常重要的语法点。this可以用在构造函数之中表示实例对象。除此之外this还可以用在别的场合。 不管是什么场合this都有一个共同点它总是返回一个对象。
下面代码中this.name表示name属性所在的那个对象。由于this.name是在describe方法中调用而describe方法所在的当前对象是person因此this指向personthis.name就是person.name。
var person {name: 张三,describe: function () {return 姓名 this.name;}
};person.describe() // 姓名张三
this使用场合
1.全局环境
全局环境使用this它指的就是顶层对象window(全局变量)。
不管是不是在函数内部只要是在全局环境下运行this就是指顶层对象window。
this window // truefunction f() {console.log(this window);
}
f() // true
2.构造函数
构造函数中的this指的是实例对象。
这里定义了一个构造函数Obj。由于this指向实例对象所以在构造函数内部定义this.p就相当于定义实例对象有一个p属性。
var Obj function (p) {this.p p;
};
3.对象的方法
如果对象的方法里面包含thisthis的指向就是方法运行时所在的对象。该方法赋值给另一个对象就会改变this的指向。但是这条规则很不容易把握。请看下面的代码。obj.foo方法执行时它内部的this指向obj。
var obj {foo: function () {console.log(this);}
};obj.foo() // obj
避免多层this 由于this的指向是不确定的所以切勿在函数中包含多层的this。这里代码包含两层this结果运行后第一层指向对象o第二层指向全局对象因为实际执行的是下面的代码。
var o {f1: function () {console.log(this); // Objectvar f2 function () {console.log(this); // Window}();}
}o.f1()下面代码定义了变量that固定指向外层的this然后在内层使用that就不会发生this指向的改变。事实上使用一个变量固定this的值然后内层函数调用这个变量是非常常见的做法请务必掌握。JavaScript 提供了严格模式也可以硬性避免这种问题。严格模式下如果函数内部的this指向顶层对象就会报错。
var o {f1: function() {console.log(this);var that this;var f2 function() {console.log(that);}();}
}o.f1()
// Object
// Object
三、js的同步与异步
js是一个单线程的语言学过java、c之类的都知道其他语言有个叫类继承的东西就相当于开辟另个一个流水线是多线程
而javascript就像一条流水线它无法开辟别的流水线是一个单线程也就是说js要么加工要么包装不能同时进行多个任务和流程
定时器
JavaScript 提供定时执行代码的功能叫做定时器timer主要由setTimeout()和setInterval()这两个函数来完成。它们向任务队列添加定时任务。
在js中最基础的异步就是setTimeout和setInterval这两个函数但是很少人知道这两个人其实是异步简单介绍一下吧
setTimeout和setInterval
function void(){};
setTimeout(void,1000);//隔1000毫秒后执行一次void,然后就不会在执行了
setInterval(void,1000);//每隔1000毫秒(1秒)执行一次void同步与异步的例子
用官方一点的话来讲当一个js被执行的时候把同步代码全放到一个执行栈里面异步代码放到一个任务队列中当栈执行完毕后开始执行任务队列
scriptfunction add(){console.log(2)}function add3(){console.log(5)}function add2(){console.log(4)}console.log(1)setTimeout(add,5000);console.log(3)setInterval(add2,1000)setTimeout(add3,1000)/script首先同步的代码是console.log(1)和log(3),所以先输出了1,3然后就是异步的地方了。 异步三个代码setTimeout、setInterval、setTimeout当我们执行完同步代码也就是输出1,3开始执行异步代码对于第一个异步操作因为我们设置的延迟时间为5秒这个地方虽然没有显示出来但是这个异步操作已经开始执行也就是说当代码执行到这一步的时候计时就已经开始然后就是setInterval(add2,1000也就是4,5,4,4,4然后此时设置的第一个延迟5秒到了就输出一个2。
同步的入栈顺序是log(1),log(3),然后出栈就是1,3,输出也就是1,3
异步的入队顺序是,add,add2,add3,出来的时候也是add,add2,add3,但由于add的延迟原因所以add2先输出
所有任务可以分成两种一种是同步任务synchronous另一种是异步任asynchronous。同步任务指的是在主线程上排队执行的任务只有前一个任务执行完毕才能执行后一个任务异步任务指的是不进入主线程、而进入任务队列task queue的任务只有等主线程任务执行完毕任务队列开始通知主线程请求执行任务该任务才会进入主线程执行
四、宏任务与微任务
宏任务普通任务正常执行。正常的异步任务都是宏任务最常见的就是定时器setInterval, setImmediate, setTimeout、IO任务
微任务优先于宏任务执行但不会抢断。微任务出现比较晚queueMicrotask、ES6、Promise和async属于微任务当然async就是promise
我们可以看出来微任务的优先级比宏任务高一个任务结束后事件循环会找到并执行全部微任务然后再查找其他任务那么怎么分别宏任务和微任务呢
分辨宏任务与微任务
scriptconsole.log(aaa);setTimeout(() console.log(111), 0); //异步任务queueMicrotask(() console.log(222)); //异步任务console.log(bbb);/scriptsetTimeout(() console.log(111), 0);这里的()就类似于定义一个函数然后调用
输出的结果是
aaa
bbb
222
111
执行顺序就像我们之前说的先执行同步的也就是aaa,bbb然后在执行异步的但是这里setTimeout在queueMicrotask前面却还是先执行了queueMicrotask就是因为queueMicrotask是微任务而setTimeout是宏任务也就是说在异步中会先完成所有的微任务然后再去执行宏任务
这里 每个代码的影响不一样重要性也不一样按照官方的设想就是任务之间的不平等有些任务对于用户而言更加重要需要先执行有些任务类似定时器晚点执行也没有什么问题
