javaScript基础总结---对象、函数及语句分号

wink在干嘛

于 2022-08-28 09:00:00 发布

阅读量201

点赞数

分类专栏： JavaScript进阶学习笔记文章标签： servlet html 前端

本文链接：https://blog.csdn.net/m0_61214373/article/details/126559097

版权

JavaScript进阶学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

3.什么时候必须使用['属性名']的方式?

一、对象

1.对象的概念

① 什么是对象?

多个数据的封装体
用来保存多个数据的容器
一个对象代表现实中的一个事物

② 为什么要用对象?

统一管理多个数据

③ 对象的组成

属性: 属性名(字符串)和属性值(任意)组成
方法: 一种特别的属性(属性值是函数)

2.如何访问对象内部数据?

.属性名: 编码简单, 有时不能用
['属性名']: 编码麻烦, 能通用

3.什么时候必须使用`['属性名']`的方式?

属性名包含特殊字符: - 空格

 var p = {}
 //1. 给p对象添加一个属性: content type: text/json
 // p.content-type = 'text/json' //不能用
 p['content-type'] = 'text/json'
 console.log(p['content-type'])

二、函数

1.函数的概念

① 什么是函数

实现特定功能的n条语句的封装体
只有函数是可以执行的, 其它类型的数据不能执行

② 为什么要用函数?

提高代码复用
便于阅读交流

③ 如何定义函数?

函数声明

表达式

  function fn1 () { console.log('fn1()' )//函数声明
                   
  const fn2 = ()=> console.log('fn2()')  //表达式

2.如何调用(执行)函数

test(): 直接调用

obj.test(): 通过对象调用

new test(): new调用

test.call/apply(obj): 临时让test成为obj的方法进行调用
代码示例
  var obj = {}
  //此处不能使用箭头函数,因为箭头函数会改变this指向
  function test2 () {
    this.xxx = 'hongjilin'
  }
  // obj.test2()  不能直接, 根本就没有
  test2.call(obj)  // 可以让一个函数成为指定任意对象的方法进行调用
  console.log(obj.xxx)

3.回调函数

① 什么函数才是回调函数?

你定义的
你没有调
但最终它执行了(在某个时刻或某个条件下)

② 常见的回调函数?

dom事件回调函数 ==>发生事件的dom元素（与用户交互）
定时器回调函数 ===>window
ajax请求回调函数(后面讲) （与后台交互）
生命周期回调函数(后面讲)
  // dom事件回调函数
 document.getElementById('btn').onclick = function () {alert(this.innerHTML)}
 // 定时器回调函数
 setTimeout(function () {   alert('到点了'+this)}, 2000)

4.IIFE (自调用函数)

1.全称: Immediately-Invoked Function Expression 自调用函数

2.作用:

你定义的
你没有调
但最终它执行了(在某个时刻或某个条件下)

3.代码示例:

<body>
    <!-- 1.什么函数才是回调函数?
    你定义的
    你没有调
    但最终它执行了(在某个时刻或某个条件下)
    
    2.常见的回调函数?
    dom事件回调函数 ==>发生事件的dom元素   (与用户交互)
    定时器回调函数 ===>window

    ajax请求回调函数(后面讲)    (与后台交互)
    生命周期回调函数(后面讲)   -->


    <button id="btn">点我弹出</button>

    <script>
       document.getElementById('btn').onclick = function (){  //dom事件回调函数
        alert (this.innerHTML)
       }

       setTimeout(function(){   //定时器回调函数
        alert('到点了')
       },2000)
    </script>
</body>

5.函数中的this

① this是什么?

任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window
所有函数内部都有一个变量this
它的值是调用函数的当前对象

② 如何确定this的值?

test(): window
p.test(): p
new test(): 新创建的对象
p.call(obj): obj

③ 代码举例详解

 function Person(color) {
   console.log(this)
   this.color = color;
   this.getColor = function () {
     console.log(this)
     return this.color;
   };
   this.setColor = function (color) {
     console.log(this)
     this.color = color;
   };
 }

 Person("red"); //this是谁? window

 const p = new Person("yello"); //this是谁? p

 p.getColor(); //this是谁? p

 const obj = {};
 //调用call会改变this指向-->让我的p函数成为`obj`的临时方法进行调用
 p.setColor.call(obj, "black"); //this是谁? obj

 const test = p.setColor;
 test(); //this是谁? window  -->因为直接调用了

 function fun1() {
   function fun2() {  console.log(this); }
   fun2(); //this是谁? window
 }
fun1();//调用fun1

三、关于语句分号

1.js一条语句的后面可以不加分号

2.是否加分号是编码风格问题, 没有应该不应该，只有你自己喜欢不喜欢

3.在下面2种情况下不加分号会有问题

小括号开头的前一条语句
中方括号开头的前一条语句

4.解决办法: 在行首加分号

5.强有力的例子: vue.js库

6.知乎热议: https://www.zhihu.com/question/20298345