重学Javascript基础（七）JavaScript对象的使用

文章	分类	评论
61	3	9

01.对象的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        /*
            两个术语：函数、方法
                函数(function): 如果在Javascript代码中通过function默认定义一个结构，称之为函数
                方法（method):如果将一个函数放到对象中，作为对象的一个属性，那么将这个称之为方法
        */
       function foo(){

       }

    //    key:字符串类型，但是在定义对象的属性名时，大部分情况下都是可以省略的
    var person = {
        // key:value,
        name:"why",
        age:18,
        height:1.88,
        "my friend":{
            name:"kobe",
            age:30
        },
        run:function(){
            console.log("running")
        },
        eat:function(){
            console.log("eat foods")
        },
        study:function(){
            console.log("studying")
        }
    }
    </script>
</body>
</html>

02.对象的创建方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 1.对象字面量
        var obj1 = {
            name:"why"
        }
        // 2.new Object()
        // Object构造函数
        // var obj2 = new Object()
        // obj2.name = "kobe"

        // 3.new 其他类()
        // function Person(){
        //     var obj3 = new Person()
        // }
    </script>
    
</body>
</html>

03.对象常见的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.定义了一个对象
        var info = {
            name:"why",
            age:18,
            friend:{
                name:"kobe",
                age:30
            },
            running:function(){
                console.log("running~")
            }
        }

        // 2.访问对象中的属性
        // console.log(info.name)
        // console.log(info.friend.name)
        // info.running()

        // 3.修改对象中的属性
        // info.age = 5;
        // info.running = function(){
        //     alert("I am running~")
        // }
        // console.log(info.age)
        // info.running()

        // 4.添加对象中的属性
        info.height = 1.88
        info.studying = function(){
            console.log("I am studying~")
        }
        console.log(info)

        // 5.删除对象中的属性
        // delete关键字（操作符）
        delete info.age
        delete info.height 
        console.log(info)
    </script>
</body>
</html>

04.对象的方括号使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var obj = {
            name:"why",
            "my friend":"kobe",
            "eating something":function(){
                console.log("eating~")
            }
        }

        console.log(obj["my friend"])
        console.log(obj.name)
        console.log(obj["name"])

        // obj["eating something"]()
        var eatKey = "eating something"
        obj[eatKey]()
    </script>
</body>
</html>

05.对象的案例练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 定义商品对象
        var product = {
            name:"鞋子",
            desc:"鞋子非常棒！！！",
            price:99,
            brand:"nick"
        }

        // 定义手机对象
        var phone = {
            name:"iPhone 13 Pro Max",
            desc: "对iPhone的描述信息",
            price: 888,
            callPhone:function(phoneNum){
                console.log("打电话给某人：",phoneNum)
            },
            playGame:function(gameName){
                console.log("玩游戏:",getName)
            }
        }

        // 定义用户对象
        var user = {
            id:111111,
            account:"coderwhy",
            nickname:"coderwhy",
            password:"xxx123",
            avatarURL: "图片地址",
            role: {
                id: 110,
                name: "管理员",
                createTime: "2033-03-03"
            }
        }
    </script>
</body>
</html>

06.对象的遍历方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var info = {
            name:"why",
            age:18,
            height:1.88
        }
        // console.log(Object.keys(info))

        // 对对象进行遍历
        // 1.普通for循环
        var infoKeys = Object.keys(info)
        for(var i = 0;i<infoKeys.length;i++){
            var key = infoKeys[i]
            var value = info[key]
            console.log(`key:${key},value:${value}`)
        }

        // 2.for..in..:遍历对象
        for(var key in info){
            var value = info[key]
            console.log(`key:${key},value:${value}`)
        }

        // 对象不支持： for .. of..:默认是不能遍历对象
        // for(var foo of info){

        // }
    </script>
</body>
</html>

07.Javascript内存分配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var name = "why"
        var age = 18
        var obj = {
            foo:"foo",
            bar:123
        }

        var message = "Hello " + name
    </script>
</body>
</html>

08.JavaScript一些现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // var num1 = 123
        // var num2 = 123
        // console.log(num1 === num2)

        // // 1.现象一：两个对象的比较
        // var obj1 = {}
        // var obj2 = {}
        // console.log(obj1 === obj2)

        // // 2.现象二：引用的赋值
        // var info = {
        //     name:"why",
        //     friend:{
        //         name:"kobe"
        //     }
        // }
        // var friend = info.friend
        // friend.name = "james"
        // console.log(info.friend.name) // james

        // // 3.现象三：值传递
        // function foo(a){
        //     a = 200
        // }
        // var num = 100 
        // foo(num)
        // console.log(num) // 100

        // 4.现象四：引用传递，但是在函数中创建了一个新对象，没有对传入对象进行修改
        function foo(a){
            a = {
                name:"why" // 创建新的对象地址
            }
        }
        var obj = {
            name:"obj"
        }
        foo(obj)
        console.log(obj) // obj

        // 5.现象五：引用传递，但是对传入的对象进行修改
        function foo(a){
            a.name = "why" // 在原有的那么地址修改
        }

        var obj = {
            name:"obj"
        }
        foo(obj)
        console.log(obj) // why,
    </script>
</body>
</html>

09.函数中的this指向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 函数中是有一个this的变量，this变量在大多数情况下会指向一个对象
        // arguments保存的是传入的所有参数

        // 情况一：如果普通的函数被默认调用,那么this指向就是window
        // function foo(name,age){
        //     console.log(arguments)
        //     console.log(this)
        // }
        // foo("abc",123)

        function sayHello(name){
            console.log(this)
        }

        // 情况二：如果函数它是被某一个对象来引用并且调用它，那么this会指向这个对象（调用的那个调用）
        var obj = {
            name:"why",
            running:function(){
                console.log(this)
                console.log(obj)
                console.log(this === obj)
            }
        }
        obj.running()

        // 考验题目
        // 1.题目一：
        var fn = obj.running
        fn()  // window

        // 2.题目二：
        function bar(){
            console.log(this) // obj对象
        }
        var obj = {
            name:"why",
            bar:bar
        }
        obj.bar()
    </script>
</body>
</html>

10.this在开发中的作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var info = {
            name:"why",
            age:18,
            running:function(){
                console.log("running~",this.name)
            },
            eating:function(){
                console.log("eating~",this.name)
            },
            studying:function(){
                console.log("studying~",this.name)
            }
        }

        info.running()
        info.eating()
        info.studying()
    </script>
</body>
</html>

11.创建一系列对象的方式一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // 一系列的学生对象
        // 重复代码的复用：for/函数
        var stu1 = {
            name:"why",
            age:18,
            height:1.88,
            running:function(){
                console.log("running~")
            }
        }

        var stu2 = {
            name:"kobe",
            age:30,
            height:1.98,
            running:function(){
                console.log("running~")
            }
        }

        var stu3 = {
            name:"james",
            age:25,
            height:2.05,
            running:function(){
                console.log("running~")
            }
        }
        
    </script>
</body>
</html>

12.创建一系列对象的方式二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // for循环
        // for(var i = 0;i < 3;i++){
        //     var stu = {
        //         name:"why",
        //         age:18,
        //         height:1.88,
        //         running:function(){

        //         }
        //     }
        // }

        var obj1 = {}
        var obj2 = {}

        // 工厂函数（工厂生产student对象） -> 一种设计模式
        // 通过工厂设计模式，自己来定义了一个这样的函数
        function createStudent(name,age,height){
            var stu = {}
            stu.name = name
            stu.age = age
            stu.height = height
            stu.running = function(){
                console.log("running~")
            }
            return stu
        }

        var stu1 = createStudent("why",18,1.88)
        var stu2 = createStudent("kobe",30,1.98)
        var stu3 = createStudent("james",25,2.05)
        console.log(stu1)
        console.log(stu2)
        console.log(stu3)
        
    </script>
</body>
</html>

13.创建一系列对象的方式三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        // Javascript已默认提供给了我们可以更加符合JavaScript思维方式（面向对象的思维方式）的一种创建对象的规则
        // 在函数中的this一般指向某一个对象
        /*
            如果一个函数被new操作符调用
                1.创建出来一个新的空对象
                2.让this指向这个空对象
                3.执行函数体的代码块
                4.如果没有明确的返回一个非空对象，那么this指向的对象会自动返回
        */
       function coder(name,age,height){
        this.name = name
        this.age  = age
        this.height = height
        this.running = function(){
            console.log("running~")
        }
       }

       // 在函数调用的前面加new 关键字（操作符）
       var stu1 = new coder("why",18,1.88)
       var stu2 = new coder("kobe",30,1.98)
       console.log(stu1,stu2)

       alert("Hello")
       
    </script>
</body>
</html>

14.构造函数的补充

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 创建一系列的对象
        // 构造函数的名称：使用大驼峰
        function Person(){

        }
        var p1 = new Person()
        console.log(p1)
        // 平时创建普通的对象
        // new Object
        var obj1 = {}
        var obj2 = new Object()
        var obj3 = new Person()

        // 普通函数：使用小驼峰
        function sayHello(){
            
        }
    </script>
</body>
</html>

15.额外补充-全局对象window

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 浏览器中存在一个全局对象object -> window
        // 作用一：查找变量时，最终会找到window头上
        // 作用三：将一些浏览器全局提供给我们的变量/函数/对象,放在window对象上面
        // 作用三(了解)：使用var定义的变量会被默认添加到window上面
        console.log(window)

        // 使用var变量定义
        var message = "Hello World"

        function foo(){
            // 自己的作用域
            // abc()
            // alert("Hello World")
            console.log(window.console === console)

            // 创建一个对象
            var obj  = new Object()
            console.log(window.Object === Object)

            // DOM
            console.log(document)

            // window.message
            console.log(window.message)
        }

        foo()
    </script>
</body>
</html>

16.额外补充-函数也是对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 定义原始类型的变量
        var name = "why"
        var age = 18

        // 定义对象类型的变量
        // 地址 - 指针 - 引用
        var obj = {}
        var foo = function(){} // 堆内存
        function abc(){} // 堆内存

        console.log(typeof obj) // object
        console.log(typeof foo) // function -> object

        // var stu = new Student() // stu是一个Student -> Person

        // 引申一些别的知识（了解）
        var info = {}
        info.name = "abc"

        function sayHello(){

        }
        sayHello.age = 18
        console.log(sayHello.age)

        function Dog(){

        }
        // 构造函数上（类上面）添加的函数，称之为类方法
        Dog.running = function(){}
        Dog.running()
        
    </script>
</body>
</html>

感谢大家观看，我们下次见

abzzp

十天看一部剧，还可以吧 [[呲牙]]

@梦不见的梦行，谢谢提醒,我优化一下

梦不见的梦

网站的速度有待提升，每次打开都要转半天还进不来呢

@React实战爱彼迎项目(二) - 程序员鸡皮哪里有问题了，报错了吗？ [[微笑]]

@Teacher Du 那是怕你们毕不了业，我大学那会儿给小礼品 [[发呆]]

Teacher Du

我们大学那会，献血还给学分~

夜

@ab 我想去学网安，比如网警，但分也贼高😕

@夜加油，你一样也可以成为程序员的，需要学习资料可以V我

佬发布的好多技术文章似乎我只能评论这篇，真正的程序员！！哇塞我也想去献血，过两年就成年了可以去献血了

程序员鸡皮

站点介绍