JS笔记合集之对象

对象

对象基本使用

对象是JS中的一种复合数据类型，它相当于一个容器，在对象中可以存储各种不同类型的数据

而基本数据类型(原始值)只能存储一些简单的数据，如：

语法:
	原始创建对象：
		let obj = new Object()
    向对象中添加属性
	    对象.属性名 = 属性值
	obj.name = 'taotao'
	读取对象中的属性
    	对象.属性名
	obj.name
	如果读取的是一个对象中没有的属性，不会报错，会返回 undefined
	修改属性：
    	对象.属性名 = 新值
	删除属性：
    	delete obj.name

对象中的属性

? 属性名

? 通常属性名就是一个字符串，所以属性名可以是任何值，没有什么特殊要求

? 如果不能直接使用，需要用[] 的形式来设置

? 属性值

		对象的属性值可以是任意的数据类型，也可以是一个对象

	obj["@12sincjis"] = "taotao"// 不建议

属性的两种写法：
		obj.name = 'taotao'
		obj['name'] = 'taotao'

? in 运算符

• 用来检查对象中是否含有某个属性

• 语法 属性名 in obj

• 如果有返回true，没有返回false

  console.log("name" in obj)

对象字面量

? 对象字面量

? 可以直接使用{}来创建对象

? 使用{}所创建的对象，可以直接向对象中添加属性

? 语法： {

? 属性名:属性值,

? }

 let mySymbol = Symbol() 
	let obj2 = {
            name:"孙悟空", 
            age:18,
            ["gender"]:"男",
            [mySymbol]:"特殊的属性",
            hello:{
                a:1,
                b:true
            }
        }

枚举属性

枚举属性

? 指将对象中的所有属性全部获取

? 我们这里可以利用 for - in语句

- 语法：    `for(let propName in 对象){        语句...    }`
-  for-in的循环体会执行多次，有几个属性就会执行几次，    每次执行时，都会将一个属性名赋值给我们所定义的变量
- 注意：并不是所有的属性都可以枚举，比如 使用符号添加的属性

 for(let propName in obj){
            console.log(propName, obj[propName])  //拿到所有的属性名和属性值
        }

可变类型

- 原始值都属于不可变类型，一旦创建就无法修改
- 在内存中不会创建重复的原始值

 		let a = 10 
        let b = 10
        a = 12 // 当我们为一个变量重新赋值时，绝对不会影响其他变量

• 对象属于可变类型-
• 对象创建完成后，可以任意的添加删除修改对象中的属性
• 注意：
• • 当对两个对象进行相等或全等比较时，比较的是对象的内存地址
  • 如果有两个变量同时指向一个对象, 通过一个变量修改对象时，对另外一个变量也会产生影响

		let obj = {
            name:"孙悟空", 
            age:18, 
        }
        let obj2 = obj   // 当修改一个对象时，所有指向该对象的变量都会收到影响
        

更改变量和对象

? 修改对象

• 修改对象时，如果有其他变量指向该对象 则所有指向该对象的变量都会受到影响

  修改变量

• 修改变量时，只会影响当前的变量

• 在使用变量存储对象时，很容易因为改变变量指向的对象，提高代码的复杂度,所以通常情况下，声明存储对象的变量时会使用const

注意： const禁止变量被重新赋值，对对象的修改没有任何影响

对象中的方法

? 方法（method）

• 当一个对象的属性指向一个函数，那么我们就称这个函数是该对象的方法
• 调用函数就称为调用对象的方法

 // 函数也可以成为一个对象的属性
        obj.sayHello = function(){
            alert("hello")
        }
----------在对象中简写
	let obj = {
            name:"孙悟空", 
            age:18, 
       		sayHello(){
           		  alert("hello")
        	}
        }
		

函数

函数的基本概念和使用

? 函数（Function）

• 函数也是一个对象

• 它具有其他对象所有的功能

• 函数中可以存储代码，且可以在需要时调用这些代码

• 简单的来说，就是可以复用代码，提高开发效率

  语法： function 函数名(){ 语句... }

  调用函数：

  • 调用函数就是执行函数中存储的代码
  • 语法： 函数对象()
  • 使用typeof检查函数对象时会返回function

//创建一个对象 
	function fn(){
       console.log("你好！")
    }
	fn()  //调用
   console.log(typeof fn)   // Function

函数的创建方式

三种方式：

函数的定义方式：

1.函数声明 function 函数名(){ 语句... }

2.函数表达式 const 变量 = function(){ 语句... }

3.箭头函数 () => { 语句... }

 	 function fn(){
            console.log("函数声明所定义的函数~")
        }

        const fn2 = function(){
            console.log("函数表达式")
        }

        const fn3 = () => {
            console.log("箭头函数")
        }

        const fn4 = () => console.log("箭头函数")

函数的参数

? 形式参数（形参）

• 在定义函数时，可以在函数中指定数量不等的形式参数（形参） -

• 在函数中定义形参，就相当于在函数内部声明了对应的变量但是没有赋值

  实际参数（实参）

• 在调用函数时，可以在函数的()传递数量不等的实参

• • 实参会赋值给其对应的形参
  • • 参数：
    • 1.如果实参和形参数量相同，则对应的实参赋值给对应的形参
    • 2.如果实参多余形参，则多余的实参不会使用
    • 3.如果形参多余实参，则多余的形参为undefined
    • • 参数的类型
      • JS中不会检查参数的类型，可以传递任何类型的值作为参数

	 function sum(a, b){
            console.log(a + b)
        }
	sum(1,2)

箭头函数的参数

	 const fn = (a, b) => {
            console.log("a =", a);
            console.log("b =", b);
        }
     fn(1，2)

? 当箭头函数中只有一个参数时，可以省略()

  		const fn2 = a => {
            console.log("a =", a);
        }

? 我们在定义参数的时候可以指定默认值

 const fn3 = (a=10, b=20, c=30) => {
            console.log("a =", a);
            console.log("b =", b);
            console.log("c =", c);
        }

        fn3(1, 2)
//c的值没有传递，所以取到默认值30

对象作为参数

let obj = {name:'taotao'}
function fn(obj){
    
}
//传递实参时，传递并不是变量本身，而是变量中存储的值
fn(obj)

// 函数每次调用，都会重新创建默认值
        function fn2(a = {name:"沙和尚"}){
            console.log("a =", a)
            a.name = "唐僧"
            console.log("a =", a)
        }

        fn2() // 沙和尚 唐僧
        fn2() // 沙和尚 唐僧 or 唐僧 唐僧

函数作为参数

? 在JS中，函数也是一个对象（一等函数）

? 别的对象能做的事情，函数也可以

 	function fn(a){
            console.log("a =", a)
     			//函数中调用另一个函数
           a()  //执行的就是箭头函数
        }
//调用的时候传递的就是一个箭头函数，传递过去的就是a这个函数
	fn(()=>console.log("我是箭头函数"))

函数的返回值

? 我们一般都是返回，而不是在控制台中打印

function sum(a, b){
    return a + b
}
sum(1, 2)  // 返回值就是函数的执行结果

• ? 在函数中，可以通过return关键字来指定函数的返回值

• 返回值就是函数的执行结果，函数调用完毕返回值便会作为结果返回

• return一执行函数立即结束, return 之后的所有语句都不会执行

• 任何值都可以作为返回值使用（包括对象和函数之类）

• 如果return后不跟任何值，则相当于返回undefined

• 如果不写return，那么函数的返回值依然是undefined

箭头函数的返回值

• ? 箭头函数的返回值可以直接写在箭头后
• 如果直接在箭头后设置对象字面量为返回值时，对象字面量必须使用()括起来

const sum = (a, b) => a + b   //如果只要一条执行语句的话，可以省略 return
const fn = name => ({name:"孙悟空"})  //如果只要一个参数，可以省略括号，对象字面量必须使用()括起来

作用域（scope）

• 作用域指的是一个变量的可见区域

• 作用域有两种：

  • 全局作用域

    • 全局作用域在网页运行时创建，在网页关闭时销毁
    • 所有直接编写到script标签中的代码都位于全局作用域中
    • 全局作用域中的变量时全局变量，可以在任意地方访问

  • 局部作用域

    • 块级作用域

      • 块级作用域是一种局部作用域

      • 块级作用域在代码块执行时创建，代码执行完毕它就销毁了

      • 在块级作用域中声明的变量是局部变量，只能在块内部访问，外部无法访问

      •   		{
                        let b = "变量b"
        
                        {
                            {
                                //这里根据作用域链的查找机制，一层一层往上查找，是可以找到变量b的
                                console.log(b) 
                            }
                        }
                    }
        
                    {
                        //这里是访问不到变量b的，会报错
                        console.log(b)  
                    }
        

    • 函数作用域

      • 函数作用域也是一种局部作用域

      • 函数作用域在函数调用时产生，调用结束后销毁

      • 函数每次调用都会产生一个全新的函数作用域

      • 在函数中定义的变量是局部变量，只能在函数内部访问，外部无法访问

      • 	function fn(){
                    let a = "fn中的变量a"
          
                    console.log(a)
                }
          
                fn()
          		//这里是无法访问到变量a的，会报   a is not defined
                console.log(a)
        

作用域链

? 当我们使用一个变量时，

? JS解释器会优先在当前作用域中寻找变量，如果找到了则直接使用

? 如果没找到，则去上一层作用域中寻找，找到了则使用

? 如果没找到，则继续去上一层寻找，以此类推

? 如果一直到全局作用域都没找到，则报错 x is not defined

	let b = 33

        function fn(){
            let b = 44

            function f1(){
                let b = 55
                console.log(b)
            }

            f1()
            
        }

        fn()

Window对象

window对象

• ? 在浏览器中，浏览器为我们提供一个window对象，可以直接访问

• window对象代表浏览器窗口，通过该对象可以对六拉尼去窗口进行各种操作

  • 除此之外window对象还负责存储JS中的内置对象和浏览器的宿主对象

• window对象的属性可以通过window对象访问，也可以直接访问

• 函数就可以认为是window对象的方法

  alert(window)
        window.alert(123)
     			window.console.log("哈哈")
  

  var用来声明变量,作用和let相同，但是var不具有块作用域

  • 在全局中使用var声明的变量，都会作为window对象的属性保存
  • 使用function声明的函数，都会作为window的方法保存
  • 使用let声明的变量不会存储在window对象中，而存在一个秘密的小地方（无法访问）
  • var虽然没有块作用域，但有函数作用域
  • 在局部作用域中，如果没有使用var或let声明变量，则变量会自动成为window对象的属性 也就是全局变量

变量提升

? 变量的提升

• 使用var声明的变量，它会在所有代码执行前被声明

所以我们可以在变量声明前就访问变量函数的提升

• 使用函数声明创建的函数，会在其他代码执行前被创建

  所以我们可以在函数声明前调用函数let声明的变量实际也会提升，但是在赋值之前解释器禁止对该变量的访问

作用域小练习：
	   var a = 1
        function fn(){
            a = 2
            console.log(a) // 2
        }
        fn()
        console.log(a) // 2 
---------
            // 变量和函数的提升同样适用于函数作用域
     var a = 1
        function fn(){
            console.log(a) //undefined
            var a = 2
            console.log(a) // 2
        }
        fn()
        console.log(a) // 1 
-----------------
             // 定义形参就相当于在函数中声明了对应的变量，但是没有赋值
       var a = 1
        function fn(a){
            console.log(a) //undefined
            a = 2
            console.log(a) // 2
        }
        fn()
        console.log(a) // 1    
-------------------
      var a = 1
        function fn(a){
            console.log(a) //10
            a = 2
            console.log(a) // 2
        }
        fn(10)
        console.log(a) // 1
--------------------
 	var a = 1
        function fn(a){
            console.log(a) //1
            a = 2
            console.log(a) // 2
        }
        fn(a)
        console.log(a) // 1 

debug

? debug是进行断点调试的，如果出现bug了，我们可以在控制台里面卡断点

打完断电一定要刷新，这样才可以进入断点内

立即执行函数

? 在开发中应该尽量减少直接在全局作用域中编写代码！

? 所以我们的代码要尽量编写的局部作用域

? 如果使用let声明的变量，可以使用{}来创建块作用域

? 立即执行函数（IIFE）

• 立即是一个匿名的函数，并它只会调用一次
• 可以利用IIFE来创建一个一次性的函数作用域，避免变量冲突的问题

		(function(){
            let a = 10
            console.log(111)
        }())

this指向问题

? this

• 函数在执行时，JS解析器每次都会传递进一个隐含的参数

• 这个参数就叫做 this

• this会指向一个对象

• this所指向的对象会根据函数调用方式的不同而不同

• 1.以函数形式调用时，this指向的是window

• 2.以方法的形式调用时，this指向的是调用方法的对象

• ......

• 通过this可以在方法中引用调用方法的对象

后面出一个专门this指向的问题

箭头函数的this

? 箭头函数：

([参数]) => 返回值

例子：

1. 无参箭头函数：() => 返回值
2. 一个参数的：a => 返回值
3. 多个参数的：(a, b) => 返回值
4. 只有一个语句的函数：() => 返回值
5. 只返回一个对象的函数：() => ({...})
6. 有多行语句的函数：() => { .... return 返回值 }
7. 箭头函数没有自己的this，它的this有外层作用域决定
8. 箭头函数的this和它的调用方式无关

    const fn2 = () => {
                console.log("fn2 -->", this) // 总是window
            }

严格模式

? JS运行代码的模式有两种：

• 正常模式
• 默认情况下代码都运行在正常模式中，
• 在正常模式，语法检查不严格
• 能不报错就不报错
• 这种处理方式导致代码的运行性能较差
• 严格模式
  • 在严格模式下，语法检查变得严格
  • 1.禁止一些语法
  • 2.更容易报错
  • 3.提升了性能
• 在开发中，我们尽量使用严格模式，这样可以将一些隐藏的问题给消除，同时也能提高性能

 	"use strict" // 全局的严格模式
 	function fn(){
            "use strict" // 函数的严格的模式
        }