JS高级七

最新推荐文章于 2024-08-08 23:04:40 发布

苏苏苏0

最新推荐文章于 2024-08-08 23:04:40 发布

阅读量772

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52482833/article/details/123685215

版权

JS计时事件

在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

两个关键方法是：

setInterval(function,milliseconds) - 间隔指定的毫秒数不停地执行指定的代码。
   function---指定运行代码
   milliseconds---毫秒数
   clearInterval(intervalVariable)方法用于停止setInterval()方法执行的函数代码
   setInterval()的返回值。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script>
           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 id="test1"></h1>
       <input type="button" value="clearInterval" id="but1">
       <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>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script>
           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 id="test1"></h1>
       <input type="button" value="clearInterval" id="but1">
       <h1>
           setTimeout(function,milliseconds) - 间隔指定的毫秒数后执行指定的代码一次。<br>
           function---指定运行代码<br>
           milliseconds---毫秒数<br>
           clearTimeout(timeoutVariable) 方法用于停止执行setTimeout()方法的函数代码。<br>
           setTimeout方法的返回值
       </h1>
   </body>
</html>

闭包：

1.什么是「闭包」?
   「函数」和「函数内部能访问到的变量」的总和，就是一个闭包。
<script>
   var local="变量"; //变量
   function foo(){ //函数
       console.log(local);
   }
</script>
假设上面三行代码在一个立即执行函数中
<script>
   function hanshu1(){
       var local="变量"; //局部变量
       function foo(){ //函数
           console.log(local);
       }
   }
</script>
三行代码中，有一个局部变量 local，有一个函数 foo，foo 里面可以访问到 local 变量。好了这就是一个闭包.

有的人认为闭包是需要函数套函数，然后 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.

苏苏苏0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS高级七

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

扫一扫