JavaScript零基础通关（10）变量作用域，作用域链，作用域链解析-利用构造函数创建对象，new关键字遍历对象，对象，概念，定义属性，

编程语言 2022-04-20 01:49:42 阅读次数: 0

10-变量作用域

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 变量的作用域： 根据作用域的不同我们变量分为全局变量和局部变量
        // 1. 全局变量： 在全局作用域下的变量 在全局下都可以使用
        // 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
        var num = 10; // num就是一个全局变量
        console.log(num);

        function fn() {
    
    
            console.log(num);

        }
        fn();
        // console.log(aru);

        // 2. 局部变量   在局部作用域下的变量   后者在函数内部的变量就是 局部变量
        // 注意： 函数的形参也可以看做是局部变量
        function fun(aru) {
    
    
            var num1 = 10; // num1就是局部变量 只能在函数内部使用
            num2 = 20;
        }
        fun();
        // console.log(num1);
        // console.log(num2);
        // 3. 从执行效率来看全局变量和局部变量
        // (1) 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
        // (2) 局部变量 当我们程序执行完毕就会销毁， 比较节约内存资源
    </script>
</head>

<body>

</body>

</html>

如果在函数的内部，没有声明直接赋值的变量也属于全局变量，
在函数内部的变量局部变量
函数的形参也可以看作是局部变量，函数的形参也可以看作是局部变量，
全局变量只有在浏览器关闭的时候才会销毁，比较占有内存资源，局部变量当程序执行完毕就会销毁，比较解决内存资源

JS没有块级作用域

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // js中没有块级作用域  js的作用域： 全局作用域  局部作用域  现阶段我们js 没有 块级作用域
        // 我们js 也是在 es6 的时候新增的块级作用域
        // 块级作用域 {
    
    }   if {
    
    }  for {
    
    }
        // java 
        // if(xx) {
    
    
        //     int num = 10;
        // }
        // 外面的是不能调用num的
        if (3 < 5) {
    
    
            var num = 10;
        }
        console.log(num);
    </script>
</head>

<body>

</body>

</html>

12作用域链

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 作用域链  ： 内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值 这种结构我们称为作用域链   就近原则
        var num = 10;

        function fn() {
    
     // 外部函数
            var num = 20;

            function fun() {
    
     // 内部函数
                console.log(num);

            }
            fun();
        }
        fn();
    </script>
</head>

<body>

</body>

</html>

13-作用域链解析

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 案例1 ： 结果是几？
        function f1() {
    
    
            var num = 123;

            function f2() {
    
    
                var num = 0;
                console.log(num); // 站在目标出发，一层一层的往外查找
            }
            f2();
        }
        var num = 456;
        f1();
        // 案例2 ：结果是几？
        var a = 1;

        function fn1() {
    
    
            var a = 2;
            var b = '22';
            fn2();

            function fn2() {
    
    
                var a = 3;
                fn3();

                function fn3() {
    
    
                    var a = 4;
                    console.log(a); //a的值 ?
                    console.log(b); //b的值 ?
                }
            }
        }
        fn1();
    </script>
</head>

<body>

</body>

</html>

站在目标除法，一层一层往外查找

14-预解析

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1问  
        console.log(num);



        // 2问
        console.log(num); // undefined  坑 1
        var num = 10;
        // 相当于执行了以下代码
        // var num;
        // console.log(num);
        // num = 10;



        // 3问  
        function fn() {
    
    
            console.log(11);
        }
        fn();




        // 4问
        fun(); // 报错  坑2 
        var fun = function() {
    
    
                console.log(22);

            }
            // 函数表达式 调用必须写在函数表达式的下面
            // 相当于执行了以下代码
            // var fun;
            // fun();
            // fun = function() {
    
    
            //         console.log(22);

        //     }

        // 1. 我们js引擎运行js 分为两步：  预解析  代码执行
        // (1). 预解析 js引擎会把js 里面所有的 var  还有 function 提升到当前作用域的最前面
        // (2). 代码执行  按照代码书写的顺序从上往下执行
        // 2. 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
        // (1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面  不提升赋值操作
        // (2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面  不调用函数
    </script>
</head>

<body>

</body>

</html>

fun();
var fun=function(){console.log(22);}
函数表达式调用必须写在函数表达式的下面，相当于执行了以下代码：
解析JS运行“昱解析，代码执行
预解析：
js引擎会把JS里面的所有的var还有function提升到当前作用域的最前面，
代码执行：按照代码书写的顺序从上往下执行
变量昱解析：把所有的变量声明提升到当前作用域的最前面，不提升赋值操作
函数提升：把所有的函数声明提升到当前作用域的最前面，不调用函数
不提升赋值操作

15-预解析案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 预解析案例
        // 案例1
        // var num = 10;
        // fun();

        // function fun() {
    
    
        //     console.log(num);
        //     var num = 20;
        // }
        // // 相当于执行了以下操作
        // // var num;

        // // function fun() {
    
    
        // //     var num;
        // //     console.log(num);
        // //     num = 20;
        // // }
        // // num = 10;
        // // fun();
        // // 案例2
        // var num = 10;

        // function fn() {
    
    
        //     console.log(num);
        //     var num = 20;
        //     console.log(num);
        // }
        // fn();
        // // 相当于以下代码
        // // var num;

        // // function fn() {
    
    
        // //     var num;
        // //     console.log(num);
        // //     num = 20;
        // //     console.log(num);
        // // }
        // // num = 10;
        // // fn();
        // // 案例3
        // var a = 18;
        // f1();

        // function f1() {
    
    
        //     var b = 9;
        //     console.log(a);
        //     console.log(b);
        //     var a = '123';
        // }
        // 相当于以下代码
        // var a;

        // function f1() {
    
    
        //     var b;
        //     var a;
        //     b = 9;
        //     console.log(a);
        //     console.log(b);
        //     a = '123';
        // }
        // a = 18;
        // f1();
        // 案例4
        f1();
        console.log(c);
        console.log(b);
        console.log(a);

        function f1() {
    
    
            var a = b = c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        // 以下代码
        // function f1() {
    
    
        //     var a;
        //     a = b = c = 9;
        //     // 相当于 var  a  = 9; b = 9; c = 9; b 和 c 直接赋值 没有var 声明 当 全局变量看
        //     // 集体声明  var a = 9, b = 9, c = 9;
        //     console.log(a);
        //     console.log(b);
        //     console.log(c);
        // }
        // f1();
        // console.log(c);
        // console.log(b);
        // console.log(a);
    </script>
</head>

<body>

</body>

</html>

var num=10;
fun();
function fun(){console.log(num);var num=20;}
//相当于执行以下操作
var num;
function fun(){var num;console.log(num);num=20;}
function fn(){var num;console.log(num);num=20;console.log(num);}num=10;fn();
var a;
function f1(){var b;var a;b=9;console.log(a);console.log(b);a=‘123’;}
b和c直接赋值，没有var声明，当全局变量看
b和c直接赋值，没有var声明，当全局变量看

16-利用对象字面量创建对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1.利用对象字面量创建对象 {
    
    }
        // var obj = {
    
    };  // 创建了一个空的对象 
        var obj = {
    
    
                uname: '张三疯',
                age: 18,
                sex: '男',
                sayHi: function() {
    
    
                    console.log('hi~');

                }
            }
            // (1) 里面的属性或者方法我们采取键值对的形式  键 属性名 ： 值  属性值 
            // (2) 多个属性或者方法中间用逗号隔开的
            // (3) 方法冒号后面跟的是一个匿名函数
            // 2. 使用对象
            // (1). 调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的
        console.log(obj.uname);
        // (2). 调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']);
        // (3) 调用对象的方法 sayHi   对象名.方法名() 千万别忘记添加小括号
        obj.sayHi();
    </script>
</head>

<body>

</body>

</html>

var obj={};创建了一个空的对象
var obj={
uname:‘张三’;
age:18.
sex:‘nan’,
sayHi:function(){console.log(‘hi’);}}
调用对象的方法：对象名.方法名(),对象名.方法名（）；

17变量属性函数方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 变量、属性、函数、方法的区别
        // 1.变量和属性的相同点 他们都是用来存储数据的 
        var num = 10;
        var obj = {
    
    
            age: 18,
            fn: function() {
    
    

            }
        }

        function fn() {
    
    

        }
        console.log(obj.age);
        // console.log(age);

        // 变量 单独声明并赋值  使用的时候直接写变量名 单独存在
        // 属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性
        // 2. 函数和方法的相同点 都是实现某种功能  做某件事
        // 函数是单独声明 并且调用的 函数名() 单独存在的
        // 方法 在对象里面 调用的时候 对象.方法()
    </script>
</head>

<body>

</body>

</html>

var obj={
age:18,
fun:function(){}}
function fn(){}
console.log(obj.age);
变量单独声明并赋值，使用的时候直接写变量名，单独存在，
属性在对象里面不需要声明，使用的时候必须是对象.属性
属性：在对象里面不需要声明，使用的时候必须是对象.属性
变量单独声明并赋值，使用的时候直接写变量名单独存在
函数是单独声明的，并且调用的是函数名()单独存在的
方法在对象里面，调用的时候对象.方法()

18利用newobject创建对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 利用 new Object 创建对象
        var obj = new Object(); // 创建了一个空的对象
        obj.uname = '张三疯';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function() {
    
    
                console.log('hi~');

            }
            // (1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法
            // (2) 每个属性和方法之间用 分号结束
        console.log(obj.uname);
        console.log(obj['sex']);
        obj.sayHi();
    </script>
</head>

<body>

</body>

</html>

obj.sayHi=function(){console.log(‘hi~’);}

19-我们为什么需要构造函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 我们为什么需要使用构造函数
        // 就是因我们前面两种创建对象的方式一次只能创建一个对象
        var ldh = {
    
    
            uname: '刘德华',
            age: 55,
            sing: function() {
    
    
                console.log('冰雨');

            }
        }
        var zxy = {
    
    
                uname: '张学友',
                age: 58,
                sing: function() {
    
    
                    console.log('李香兰');

                }
            }
            // 因为我们一次创建一个对象，里面很多的属性和方法是大量相同的 我们只能复制 
            // 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数
            // 又因为这个函数不一样，里面封装的不是普通代码，而是 对象  
            // 构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
    </script>
</head>

<body>

</body>

</html>

我们为什么需要使用构造函数
创建对象的方式依次只能创建一个对象
var ldh={
uname:‘刘德华’,
age:55,
sing:function(){console.(‘并于’);}}
var zxy={uname:‘张学友’,age:58,sing=function(){console.log(‘李香兰’);}}
因为我们一次创建一个对象，里面很多的属性和方法是大量相同的 我们只能复制
一次创建一个对象，里面很多的属性和方法是大量相同我们只能复制
因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数
利用函数，重复这些相同的代码，我们九八这个函数称为构造函数
var zxy={
uname:‘张学友’,
age:58,
sing:function(){console.log(‘李香兰’);}
又因为这个函数不一样，里面封装的不是普通代码，而是 对象
构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
构造函数就是把我们对象里面的一些相同的属性和方法抽象出来封装到函数里面，
构造函数就是把我们对象里面相同的属性和方法抽象出来封装到函数里面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 利用构造函数创建对象
        // 我们需要创建四大天王的对象  相同的属性： 名字 年龄 性别  相同的方法： 唱歌
        // 构造函数的语法格式
        // function 构造函数名() {
    
    
        //     this.属性 = 值;
        //     this.方法 = function() {
    
    }
        // }
        // new 构造函数名();
        function Star(uname, age, sex) {
    
    
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
    
    
                console.log(sang);

            }
        }
        var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
        // console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('冰雨');
        var zxy = new Star('张学友', 19, '男');
        console.log(zxy.name);
        console.log(zxy.age);
        zxy.sing('李香兰')



        // 1. 构造函数名字首字母要大写
        // 2. 我们构造函数不需要return 就可以返回结果
        // 3. 我们调用构造函数 必须使用 new
        // 4. 我们只要new Star() 调用函数就创建一个对象 ldh  {
    
    }
        // 5. 我们的属性和方法前面必须添加 this
    </script>
</head>

<body>

</body>

</html>

this.sing=function(sang){console.log(Sang);}
var ldh=new Star(‘刘德华’,18,‘难’);
ldh.sing(‘并于’);
var zxy=new Star(‘张学友’,19,‘难’);

21-利用构造函数创建对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 构造函数和对象
        // 1. 构造函数  明星 泛指的某一大类  它类似于 java 语言里面的  类(class)
        function Star(uname, age, sex) {
    
    
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
    
    
                console.log(sang);

            }
        }
        // 2. 对象 特指 是一个具体的事物 刘德华 ==  {
    
    name: "刘德华", age: 18, sex: "男", sing: ƒ}
        var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
        console.log(ldh);
        // 3. 我们利用构造函数创建对象的过程我们也称为对象的实例化
    </script>
</head>

<body>

</body>

</html>

构造函数创建对象的过程我们也称为对象实例化
构造函数创建对象的过程我们也称为对象实例化
对象特指一个具体的事物
function satr(uname,age,sex){
this.name=uname;this.age=zge;this.sex=sex;this.sing=function(sang){console.log(Sang);}}

new关键字执行过程

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // new关键字执行过程
        // 1. new 构造函数可以在内存中创建了一个空的对象 
        // 2. this 就会指向刚才创建的空对象
        // 3. 执行构造函数里面的代码 给这个空对象添加属性和方法
        // 4. 返回这个对象
        function Star(uname, age, sex) {
    
    
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
    
    
                console.log(sang);

            }
        }
        var ldh = new Star('刘德华', 18, '男');
    </script>
</head>

<body>

</body>

</html>

new关键字的执行过程：
new构造函数可以在内存当中创建了一个空对象，this就会指向刚才创建的空对象，执行构造函数里面的代码，给这个空对象添加属性和方法，返回这个对象

23-new关键字遍历对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 遍历对象 
        var obj = {
    
    
                name: 'pink老师',
                age: 18,
                sex: '男',
                fn: function() {
    
    }
            }
            // console.log(obj.name);
            // console.log(obj.age);
            // console.log(obj.sex);
            // for in 遍历我们的对象
            // for (变量 in 对象) {
    
    

        // }
        for (var k in obj) {
    
    
            console.log(k); // k 变量 输出  得到的是 属性名
            console.log(obj[k]); // obj[k] 得到是 属性值

        }
        // 我们使用 for in 里面的变量 我们喜欢写 k  或者  key
    </script>
</head>

<body>

</body>

</html>

for in 遍历我们的对象
for（变量 in 对象){}
for(var k in obj){
console.log（k);
console.log(obj[k]);}
for(var k in obj){console.log(k);console.log(obj[k]);}

JavaScript 对象

1.1 什么是对象？
现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。
明星 周星驰(星爷) 女朋友 迪丽热巴 班主任 咱们班班主任

苹果 这个苹果 手机 pink老师的小米手机 游戏 刺激战场
1.1 什么是对象？
在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的。
属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）
对象是有属性和方法组成的
属性：事物的特征，在对象当中用属性来表示的，（常用名词）
方法：事物的行为，在对象当中用方法来表示的
属性：事物的特征，在对象当中用属性来表示的，
1.2 为什么需要对象
保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？
例如，将“张三疯”的个人的信息保存在数组中的方式为：

var arr = [‘张三疯’, ‘男', 128,154];

JS 中的对象表达结构更清晰，更强大。张三疯的个人信息在对象中的表达结构如下：

张三疯.姓名 =  ‘张三疯';

张三疯.性别 = ‘男'; 

张三疯.年龄 = 128; 

张三疯.身高 = 154； 

person.name =  ‘张三疯';

person.sex = ‘男'; 

person.age = 128; 

person.height = 154；

2. 创建对象的三种方式

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：
利用字面量创建对象
利用 new Object 创建对象
利用构造函数创建对象
创建对象：利用字面量，newObject创建对象，构造函数创建对象
2.1 利用字面量创建对象
对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。
{ } 里面采取键值对的形式表示
键：相当于属性名
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）
对象字面量就是花括号里面包含了表达这个具体事物对象的属性和方法，
数字类型，字符串类型，布尔类型，函数类型
2.1 利用字面量创建对象

var star = {
    
    
    name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){
    
    
        alert('大家好啊~');
    }
};

var star={
name:‘pink’,
age:18,
sex:‘男’,sayHI:function(){alert(‘大家好啊’);}};
sayHi:function(){alert(‘大家好啊’);}}
2.1 利用字面量创建对象
对象的调用
对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ”
对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用
对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号
对象.方法名(),注意这个方法名字后面一定加括号，
对象[‘属性’]
对象[‘属性’];

console.log(star.name)     // 调用名字属性
console.log(star['name'])  // 调用名字属性
star.sayHi();              // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

练习： 请按照要求写出对象
请用对象字面量的形式创建一个名字为可可的狗对象。
具体信息如下：
姓名：可可
类型(type)：阿拉斯加犬
年龄：5岁，
颜色：棕红色。
技能：汪汪汪(bark) ，演电影 (showFilm)
变量、属性、函数、方法总结
变量：单独声明赋值，单独存在
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
函数：单独存在的，通过“函数名()”的方式就可以调用
方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
函数：单独存在的，通过函数名()的方式就可以调用
方法：对象里面的函数称为方法，方法不需要声明，使用对象.方法名(）

2.2 利用new Object创建对象

跟我们前面学的 new Array() 原理一致

var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
    
    
    alert('大家好啊~');
}

var andy=new Object();
andy.name=‘pink’;
andyage=18;
andy.sex=‘男’;
andy.sayHi=function(){}}
Object() ：第一个字母大写
new Object() ：需要 new 关键字
使用的格式：对象.属性 = 值;
练习： 请按照要求写出对象
请用new Object 形式创建一个鸣人对象。
具体信息如下：
姓名：鸣人
性别：男
年龄：19岁
技能（skill）：影分身术

2.3 利用构造函数创建对象

构造函数 ：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
在 js 中，使用构造函数要时要注意以下两点：
构造函数用于创建某一类对象，其首字母要大写
构造函数要和 new 一起使用才有意义

构造函数：是一种特殊的函数，初始化对象，对象当中一些公共的属性和方法抽取出来，封装到这个函数里面，构造函数用于创建某一类对象，其首字母要大些，构造函数要和new一起使用才由意义
2.3 利用构造函数创建对象

function Person(name, age, sex) {
    
    
     this.name = name;
     this.age = age;
     this.sex = sex;
     this.sayHi = function() {
    
    
      alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
    }
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);

function Person(name,age,sex){this.name;this.age=age;this.sex=sex;this.sayHi=function()
this.sayHi=function(){alert(‘我的民资叫’+this.name+‘,年龄:’+this.sage{;
注意

  1. 构造函数约定首字母大写。
  2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
  3. 构造函数中不需要 return 返回结果。
  4. 当我们创建对象的时候，必须用 new 来调用构造函数。

函数内的属性和方法前面需要添加this,表示当前对象对象的属性和方法，return返回结果，new来调用构造函数，当我们创建对象的时候，必须用new来调用构造函数
new调用构造函数，当我们创建对象的时候，必须用new来调用构造函数
当我们创建对象的hi后，必须用new调用构造函数
练习： 请按照要求创建对象
利用构造函数创建两个英雄对象。函数中的公共部分包括：姓名属性(name)，类型属性（type），血量属性（blood）和攻击方式（attack）。
英雄对象的信息如下 ：
廉颇 力量型 500血量 攻击 ：近战
后羿 射手型 100血量 攻击： 远程
2.4 构造函数和对象
构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化
创建对象，如newStars()特指某一个，通过new关键字创建对象的过程也称为对象实例化

3. new关键字

new 在执行时会做四件事情：

  1. 在内存中创建一个新的空对象。
  2. 让 this 指向这个新的对象。
  3. 执行构造函数里面的代码，给这个新对象添加属性和方法。
  4. 返回这个新对象（所以构造函数里面不需要return）。
    在内存当中创建一个新的空对象，this指向这个新对象，执行构造函数里面的案底吗，给这个新对象添加属性和方法，返回这个新对象，
    New 和构造函数确认了眼神
  5. 他们俩生了一个宝宝。
  6. 这个宝宝必须是亲生的 this指向。
  7. 教孩子读书一肚子墨水。
    4.长大挣钱回报父母。

4. 遍历对象属性

for…in 语句用于对数组或者对象的属性进行循环操作。
其语法如下：

for (变量 in 对象名字) {
    
    
    // 在此执行代码
}

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

for (var k in obj) {
    
    
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}
  1. 对象可以让代码结构更清晰
  2. 对象复杂数据类型object。
  3. 本质：对象就是一组无序的相关属性和方法的集合。
  4. 构造函数泛指某一大类，比如苹果，不管是红色苹果还是绿色苹果，都统称为苹果。
  5. 对象实例特指一个事物，比如这个苹果、正在给你们讲课的pink老师等。
  6. for…in 语句用于对对象的属性进行循环操作。

对象就是一组无序的相关的属性和方法的集合，构造函数泛指摸一个大类
对象实例特指一个事物，for…in语句用于对对象的属性进行循环操作
对象实例特指一个事物，对象实例特指一个事物，比如这个苹果，构造函数泛智某一个大类，本质，对象就是一组无序的相关属性和方法的集合。
作业
创建一个电脑对象，该对象要有颜色、重量、品牌、型号，可以看电影、听音乐、打游戏和敲代码。
创建一个按钮对象，该对象中需要包含宽，高，背景颜色和点击行为。
创建一个车的对象，该对象要有重量、颜色、牌子，可以载人、拉货和耕田。
作业
写一个函数，实现反转任意数组。
写一个函数，实现对数字数组的排序。
小组项目： 做一个简易计算器
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43428283/article/details/124142646
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022