Javascript高级部分【7】_console.log( arr1.sort() === arr1, arr2.sort() == -优快云博客

本文链接：https://blog.youkuaiyun.com/m0_61044901/article/details/123747037

本文详细介绍了JavaScript中的定时器(setTimeout与setInterval)及其清除方法(clearTimeout与clearInterval)，并深入探讨了闭包的概念及其应用场景。此外，文章还讲解了原型和原型链的相关知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript计时事件

在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行.
两个关键方法是:
setInterval(function,milliseconds) - 间隔指定的毫秒数不停地执行指定的代码。
function---指定运行代码
milliseconds---毫秒数
clearInterval(intervalVariable)方法用于停止setInterval()方法执行的函数代码
setInterval()的返回值。 <!DOCTYPE html>

<html>

<head>

window.οnlοad=function(){

var setIntervalreturnvalue=null;

var hobj=document.getElementById("test1");

function getDate(){

var date=new Date();

var year=date.getFullYear();

var month=date.getMonth()+1;

var mydate=date.getDate();

var hours=date.getHours()

var minutes=date.getMinutes();

var seconds=date.getSeconds();

var timestring=year+"年"+month+"月"+mydate+"日 "+hours+":"+minutes+":"+seconds;

hobj.innerText=timestring;

}

//间隔指定的毫秒数不停地执行指定的代码

setIntervalreturnvalue=setInterval(function(){getDate();},1000);

var butobj=document.getElementById("but1");

butobj.οnclick=function(){

clearInterval(setIntervalreturnvalue);

}

</script>

</head>

<body>

<h1>

setInterval(function,milliseconds) - 间隔指定的毫秒数不停地执行指定的代码。<br>

function---指定运行代码<br>

milliseconds---毫秒数<br>

clearInterval(intervalVariable)方法用于停止setInterval()方法执行的函数代码<br>

intervalVariable----setInterval()的返回值。<br>

</h1>

</body>

</html>

setTimeout(function,milliseconds) - 间隔指定的毫秒数后执行指定的代码一次。
   function---指定运行代码
   milliseconds---毫秒数
   clearTimeout(timeoutVariable) 方法用于停止执行setTimeout()方法的函数代码。
   setTimeout方法的返回值<!DOCTYPE html>

<head>

<title>Document</title>

window.οnlοad=function(){

var setTimeoutreturnvalue=null;

var hobj=document.getElementById("test1");

function getDate(){

var date=new Date();

var year=date.getFullYear();

var month=date.getMonth()+1;

var mydate=date.getDate();

var hours=date.getHours();

var minutes=date.getMinutes();

var seconds=date.getSeconds();

var timestring=year+"年"+month+"月"+mydate+"日"+hours+":"+minutes+":"+seconds;

hobj.innerText=timestring;

}

//间隔指定的毫秒数后执行指定的代码一次

setTimeoutreturnvalue=setTimeout(function(){getDate();},1000);

var butobj=document.getElementById("but1");

butobj.οnclick=function(){

clearTimeout(setTimeoutreturnvalue);

}

</script>

</head>

<body>

<h1>

setTimeout(function,milliseconds)--间隔指定的毫秒数后执行指定的代码一次。

function---指定运行代码

milliseconds---毫秒数

clearTimeout(timeoutVariable) 方法用于停止执行setTimeout()方法的函数代码。

setTimeout方法的返回值

</h1>

</body>

</html>

闭包

1.什么是「闭包」?

「函数」和「函数内部能访问到的变量」的总和，就是一个闭包。
<script>
   var local="变量"; //变量
   function foo(){ //函数
       console.log(local);
   }
</script>

假设上面三行代码在一个立即执行函数中

有的人认为闭包是需要函数套函数，然后 return 一个函数的。
比如这样：
function foo(){
var local = 1; //局部变量
function bar(){ //被套在里面的函数
local++; //访问局部变量
return local;
}
return bar; //返回被套在里面的函数
}
var func = foo();
func();

上面代码中确实有闭包，local 变量和 bar 函数就组成了一个闭包（Closure）。

为什么有的人认为闭包是需要函数套函数呢？
是因为需要局部变量，所以才把 local 放在一个函数里，如果不把 local 放在一个函数里，local 就是一个全局变量了，达不到使用闭包的目的——隐藏变量

函数套函数只是为了造出一个局部变量，跟闭包无关。

为什么要 return bar 呢？
因为如果不 return，你就无法使用这个闭包.
所以 return bar 只是为了 bar 能被使用，也跟闭包无关。

闭包是需要函数套函数，然后 return 一个函数的说法是错误的。

局部变量
闭包的作用:在当前函数之外来访问当前函数的局部变量。

例如:假设我们在做一个游戏，在写其中关于「还剩几条命」的代码。
如果不用闭包，你可以直接用一个全局变量：
window.lives = 30 // 还有三十条命
这样看起来很不合适。万一不小心被其他的函数把这个值改成 -1 了怎么办。
所以我们不能让其他的函数「直接访问」这个变量。怎么办呢？
局部变量---定义在函数内/函数的参数，只能在当前函数中使用，超出本函数就不能访问。
如果使用局部变量时其他的函数又需要访问到局部变量，怎么办呢？
暴露一个函数，让别人可以「间接访问」。
function(){
var lives = 50;
window.奖励一条命 = function(){
lives =lives+1;
}
window.死一条命 = function(){
lives =lives-1;
}
}();
那么在其他的JS文件，就可以使用 window.奖励一条命()来涨命，使用window.死一条命()来让角色掉一条命。
看到闭包在哪了吗？
var lives = 50; //变量
window.奖励一条命 = function(){
lives += 1;
} // 函数
闭包就是「函数」和「函数内部能访问到的变量」

闭包会造成内存泄露？错。
内存泄露是指你用不到（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。
闭包里面的变量明明就是我们需要的变量（lives），凭什么说是内存泄露？
因为 IE。IE 有 bug，IE 在我们使用完闭包之后，依然回收不了闭包里面引用的变量。
这是 IE 的问题，不是闭包的问题。参见司徒正美的这篇文章【https://www.cnblogs.com/rubylouvre/p/3345294.html】

原型和原型链

原型和原型链是JavaScript进阶重要的概念。
尤其在插件开发过程中是不能绕过的知识点。

原型
由一个例子开始说起
看看JavaScript内置对象Array来做一个数字排序得例子
var arr1 = [1, 0, 0, 8, 6];
var arr2 = [1, 0, 0, 8, 6, 1, 1];
arr1.sort(function(n1, n2) {
return n1 - n2;
});
arr2.sort(function(n1, n2) {
return n1 - n2;
});
console.log(arr1); //[0, 0, 1, 6, 8]
console.log(arr2); //[0, 0, 1, 1, 1, 6, 8]
console.log(arr1 === arr2);//false
console.log(arr1.sort === arr2.sort);//true
本例子定义了2个数组arr1和arr2，并调用sort方法排序，当两个数组排序结束之后，分别输出这俩数组的内容，控制台输出
arr1 ：[0, 0, 1, 6, 8]
arr2 ：[0, 0, 1, 1, 1, 6, 8]
你把注意力集中输出的第3行和第4行。
这里用到JavaScript严格相等操作符===来判断arr1数组和arr2数组是否相等。
第3行，arr1和arr2是两个不同的数组，数组长度和元素都不一样，所以控制台输出false。
第4行，是判断arr1对象和arr2对象的函数sort是否是同一函数，结果输出了true。

数组arr1和数组arr2是俩不同的对象，但却用了公共的方法--sort

那么JavaScript是如何做到弄出这个公共的方法？
var arr1 = [1, 0, 0, 8, 6];
var arr2 = [1, 0, 0, 8, 6, 1, 1];
//数组求和方法
arr1.getSum = function() {
   var sum = 0;
   for(var i = 0; i < this.length; i++) {
       sum += this[i];
   }
   return sum;
}
console.log(arr1.getSum()); //输出15
console.log(arr2.getSum());//控制台报错： Uncaught TypeError: arr2.getSum is not a function
直接使用某一个对象，为其创建一个方法，这个方法它不是公共的方法。

var arr1 = [1, 0, 0, 8, 6];
var arr2 = [1, 0, 0, 8, 6, 1, 1];
//将getSum定义为原型方法
Array.prototype.getSum = function() {
   var sum = 0;
   for(var i = 0; i < this.length; i++) {
       sum += this[i];
   }
   return sum;
}
console.log(arr1.getSum()); //控制台输出15
console.log(arr2.getSum()); //控制台输出17
//将一个方法定义在原型对象上
对象名称.prototype----当前对象的原型对象

prototype---属性【每一个对象都有】，得到当前对象的原型对象
JavaScript中对象实例和创建对象的函数【构造器】之间建立一个链接【__proto__属性】。
__proto__属性是从创建对象的函数【构造器】中的prototype属性派生。

1.每个函数上面都有一个属性(prototype)指向了函数的原型对象(Person.prototype)。
function Person() { }
console.log(Person.prototype);
即使你只定义了一个空函数，也存在一个prototype的属性。
上面这两句话，在被浏览器执行的时候，内存中已经存在2个对象：
function Person(){ }--alert(typeof Person)--object---构造函数--new Person();--实例对象
Person.prototype----Person的原型对象---原型

function Person(name, age) {
   this.name = name;
   this.age = age;
}
Person.prototype.showName = function() {
           return this.name;
}
var p1 = new Person("SpringChang", 22);
console.log(p1.showName());

2.每个实例上面都有一个隐式原型(proto)指向了函数的原型对象
new Person()对象有一个隐式原型也指向了Person.prototype对象。
function Person(){ }---构造函数---Person.prototype[构造函数的原型对象]
new Person()---实例对象-----实例对象.__proto__-----Person.prototype[构造函数的原型对象]

3.实例对象访问属性或者方法的时候，自已有使用自己的，自己没有就找原型。

console.log(p1.showName()); //输出：你调用的是p1对象上面的方法

var p2 = new Person("SpringChang", 22);
console.log(p2.showName()); //输出：你调用的原型上面的方法

4.每个函数的原型对象上面都有一个constructor属性，指向了构造函数本身。
function Person(name, age) {
this.name = name;
this.age = age;
}

Person.prototype--构造函数的原型对象---constructor属性

new Person()--实例对象----__proto__---构造函数的原型对象---constructor属性

new Person().constructor---构造函数本身

console.log(Person.prototype.constructor == Person); //true

原型链

上面我们提到，对象在寻找某一属性时，如果自身属性没找到就去他对应的原型对象去找

若在原型上面找到对应的属性则停止，否则继续去原型的原型找对应的属性，这样构成了一条原型链.
   Person的原型其实还有一属性__proto__，他指向了上一级Object的原型对象。
   console.log(Person.prototype.__proto__ === Object.prototype); //true
   这时候来了一个Object对象，它是JavaScript的顶级对象，同样也有自己的原型Object.protoype.