JavaScript笔记

JavaScript笔记本文具体参考 JavaScript 权威指南 JavaScript 高级程序设计 MDN 以及 B 站尚硅 谷动力节点以及数十篇 CSDN 博客 变量定义 定义的变量不进行初始化操作 例如 let a 将自动把变量初始化为 undefined 定义变量时可以省去 var 或者 let 例如 a 1 注意

大家好,我是讯享网,很高兴认识大家。

本文具体参考《JavaScript权威指南》《JavaScript高级程序设计》
MDN
以及B站尚硅、谷动力节点以及数十篇CSDN博客

变量定义

  • 定义的变量不进行初始化操作,例如let a,将自动把变量初始化为undefined

定义变量时可以省去var或者let,例如a = 1
注意:

  • 这样所定义出来的变量是全局变量
  • 定义后一定要先进行初始化,否则该变量定义无效,会报错

  • null术语NULL类型,但是typeof的运算结果结果是“object”

事件

事件 是某事发生的信号,当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
事件和事件句柄之间差了一个“on” on<event>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9mjWQPrP-1630459255590)(index_files/_u622A_u56FE2021_u5E7407_u67082.png)]
讯享网

lode事件是在页面中所有的元素加载完毕后才发生的

事件的注册
  • onlick="function()"
var btn = document.querySelector('button'); btn.onclick = function (){}//匿名函数 btn.onclick = function; //没有括号! 

讯享网

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rgAUY6x9-1630459255592)(index_files/84382875.png)]

监听器是指专门用于对其他对象身上发生的事件或状态改变进行监听和相应处理的对象,当被监视的对象发生变化时,立即采取相应的行动。即事件句柄,即事件处理程序。
注册(绑定)事件、删除(解绑)事件的三种方式
使用onload[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xfgchSeW-1630459255595)(index_files/188522453.png)]
解决代码执行顺序所带来的问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZkBXRL9q-1630459255597)(index_files/180784812.png)]

void运算符(函数)

MDN
博客园
当点击超级链接时,什么都不发生,herf中为空时,缺省为当前地址,会重新刷新页面,而解决办法是令herf属性的值为javascript:void(0)
PS:其实javascript: javascript:undefined javascript:null 都可以实现

循环

for…in以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

语法

讯享网for (variable in object) statement 

variable
在每次迭代时,variable会被赋值为不同的属性名。
object
非Symbol类型的可枚举属性被迭代的对象。
tips:

  • for … in是为遍历对象属性而构建的,不建议与数组一起使用,数组可以用Array.prototype.forEach()和for … of
  • 它最常用的地方应该是用于调试,可以更方便的去检查对象属性(通过输出到控制台或其他方式)。尽管对于处理存储数据,数组更实用些,但是你在处理有key-value数据(比如属性用作“键”),需要检查其中的任何键是否为某值的情况时,还是推荐用for … in。
Employee = function(empno,ename){ this.empno = empno; this.ename = ename; } var e = new Employee(7369, "SMITH"); console.log(e.empno + "," + e.ename) console.log(e["empno"] + "," + e["ename"]) // for..in语句遍历对象的属性 for(var fdsafdsa in e){ // e是JS对象的话,fdsafdsa就是对象的属性名.并且属性名是字符串. //console.log(fdsafdsa) //console.log(typeof fdsafdsa) //string console.log(e[fdsafdsa]) //console.log(e.fdsafdsa)// 这种方式就不行了.因为其代表的是"属性名"所以说不能用点.的方式来引用 } 

lable标记语句

讯享网 outer: for (-----) { for (-----) { break outer; } } 

MDN

内置对象Array&Date

JavaScript的数组可以自己扩容,不存在数据越界

//在JS中提供了一个函数toLocaleString(),其实这个函数是Object中的. // 转换成具有本地语言环境的日期格式 var strTime = time.toLocaleString(); console.log(strTime) //2020/3/26 下午5:59:55 
讯享网// 进行格式转换 // 可以将年月日的信息都拿出来.然后自己拼接格式. var year = time.getFullYear(); var month = time.getMonth(); // 0-11 表示 1-12 //var day = time.getDay(); // 获取的是星期几 var day = time.getDate(); // 获取一个月份中的第几天 console.log(year + "年" + (month + 1) + "月" + day + "日") 

函数

不严格,函数传参不需要指定类型,也不指定个数,也无需声明,大括号必须有

方法

JavaScript _方法_是包含_函数定义_的属性

匿名函数

匿名函数的执行环境具有全局性,因此其 this 对象通常指向 window——《JavaScript高级程序设计》

this关键字

解析器在调用函数每次都会向函数内部传递进一个隐含的参数 ,这个隐含的参数就是this, this指向的是一个对象,这个对象我们称为函数执行的上下文对象,根据函数的调用方式的不同,this会指向不同的对象
1.以函数的形式调用时,this永远都是window
2.以方法的形式调用时,this就是调用方法的那个对象

<script type="text/javascript"> function fun() { 
      console.log(this); } let aa = { 
      name:"wzx", asd:fun//注意这里不要加括号否则相当于又调用了一次 } console.log(aa.asd === fun)//true fun()//this是windows aa.asd()//this是aa那个对象 </script> 

PS:this也会出现一些问题

讯享网function Person() { 
    // Person() 构造函数定义 `this`作为它自己的实例. this.age = 0; setInterval(function growUp() { 
    // growUp()函数定义 `this`作为全局对象windows // 与在 Person()构造函数中定义的 `this`并不相同. this.age++; }, 1000); } var p = new Person(); 
var obj = { 
    birth: 1990, getAge: function () { 
    var b = this.birth; // 1990 var fn = function () { 
    return new Date().getFullYear() - this.birth; // this指向window或undefined }; return fn(); } }; 

在ECMAScript 3/5中,通过将this值分配给封闭的变量,可以解决this问题。

讯享网function Person() { var that = this; that.age = 0; setInterval(function growUp() { // 回调引用的是`that`变量, 其值是预期的对象. that.age++; }, 1000); } 

或使用箭头函数,详见与普通函数区别

箭头函数

箭头函数内部的this是词法作用域,由上下文确定,this指向在定义的时候继承自外层第一个普通函数的this。函数体内的this对象,就是定义时所在的对象,与使用时所在的对象无关。


> 返回的表达式是对象字面量时,必须把这个对象字面量放在一对圆括号中,以免解释器分不清花括号到底是函数体的花括号,还是对象字面量的花括号。——《JavaScript权威指南》 eg.`params => ({foo: bar});`
与普通函数区别
小讯
上一篇 2025-04-05 07:10
下一篇 2025-03-02 15:28

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/129534.html