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

文章	分类	评论
256	4	34

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>

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

什么是作用域链以及作用域链在javascript中的作用是什么？ - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]回顾如何定义作用域链如何定义'作用域'？说明不同类型的作用域作用域链Scope Chain是JavaScript中的一个基本概念，它属于确定当前执行代码的上下文变量的查找和访问机制。在作用域的构建基于词法作用域的解构，即变量和函数的可见性由它们在源代码中的位置决定。在JavaScript中，每个执行上下文如函数执行上下文都绑有一个与之关联的作用域链。这个作用域就是一个包含多个环境记录Environ[...]

Hary

哈喽，你的SSL好像过期喽

abzzp

@秋风于渭水确实 [[微笑]]

通常会采取哪些措施来确保网站或者应用在不同的浏览器上的兼容性? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]不同的浏览器存在兼容性问题的核心原因是不同的浏览器可能使用的是不同的浏览器内核。在现代化开发中，大多数的浏览器兼容性问题是可以通过工程化中的配置选项来解决的。1.比如browserslist可以配置目标的浏览器或者Node环境，然后在不同的工具中起作用，比如autoprefixer/babel/postess preset env等，在进行了正确的配置后，开发的Vue或者React项目在进行打包时[...]

BFC的作用是什么呢? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]在BFC中，box会在垂直方向上一个挨着一个的排布垂直方向的间距由margin属性决定在同一个BFC中，相邻两个box之间的margin会折叠(collapse)在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的然后我们再看一下官方文档中如何说明的？总结BFC是什么？W3C文档讲：在标准流中，我们所有的盒子，不管是块级盒子还是行内盒子，它们都属于某一个FC格式化上下文，块级盒子属于BFC`块级格[...]

什么是FC呢?他是用来干什么的？ - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员

[...]什么是FC呢这里我们给出W3C给出的文档，FC文档FC的全称是FormattingContext，元素在标准流里面都是属于一个FC的。那么什么又是IFC，BFC呢？IFC行内元素的布局都属于Inline Formatting,inline level box都是在IFC中布局的BFCBFC英文全称是Block Formatting Context,也就是block level box都是在BFC中[...]

秋风于渭水

这确实是一个盲点，这个还是很有必要的，处理不好会导致网页内的元素出现抖动问题。

defer属性在javascript标签中有什么作用？ - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

[...]我们知道，当浏览器在执行到script标签的时候，首先会停止构建DOM树，然后下载Javascript文件并且执行，当JavaScript脚本执行完毕之后才会继续解析HTML标签构建DOM树。为什么Javascript程序会这样做呢？原因是我们的Javascript的作用就是操作DOM并且可以修改DOM。如果我们等到HTML执行完成之后再去执行JavaScript就会造成严重的回流和重绘，尤其是现[...]

async属性是什么？它有什么作用？ - 前端程序员,PHP程序员,全栈程序员-程序员鸡皮

[...]async属性和defer属性目标一样它也是为了不让js阻塞DOM树的构建。不过他们两个还是有区别的。async让js脚本的下载和执行是独立的。浏览器不会因为async属性的script脚本的执行而阻塞，这一点和defer属性类似。然而async属性比较任性，只要脚本被浏览器下载完成之后就会立即执行，不会等待在DOMContentLoaded之前执行。所以它不能保证是在DOMContentLoad[...]

城市教堂

我热爱旅游专栏。令人惊艳了解路线。

程序员鸡皮

站点介绍