JavaScript创建对象的三种方式

在Javascript中,我们目前可以采用三种方式创建对象(object):
利用字面量创建对象
利用new Object创建对象
利用构造函数创建对象

1. 利用字面量创建对象
对象字面量:就是花括号{ }里面包含了表达这个具体事物(对象)的属性和方法。var obj ={ };
{ }里面采用键值对的形式表示
键: 相当于属性名
值: 相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型、函数类型)

var obj = {
            uname: '张三疯',
            age: 18,
            sex: '男',
            sayHi: function () {
                console.log('hi~');
            }
        }

注意点:
(1)对象的属性值或者方法我们采取键值对的形式
键 属性名 : 值 属性值
(2)多个属性或者方法中间用逗号隔开
(3)方法冒号后面跟的是一个匿名函数

2. 使用对象。
(1)调用对象的属性,我们采取对象名.属性名

 console.log(obj.uname);
 console.log(obj.age);
 console.log(obj.sex);

(2)调用属性另一种方法 对象名['属性名']

console.log(obj['uname']);
console.log(obj['age']);
console.log(obj['sex']);

(3)调用对象的方法对象名.方法名( )

obj.sayHi();//千万别忘记加上函数的小括号

下面是演示代码的结果:
JavaScript创建对象的三种方式_第1张图片
3. 利用new Object创建对象
示例:

<script>
        var obj = new Object();//O要大写
        obj.uname = '张三疯';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function () {
            console.log('hi~');
        }
        console.log(obj.uname);
        console.log(obj.age);
        console.log(obj['sex']);
        obj.sayHi();
</script>

(1)利用等号赋值的方法添加对象的属性和方法
(2)每个属性和方法之间用分号结束
(3)属性和方法的调用和上面一样

4.利用构造函数创建对象
首先,为什么需要使用构造函数呢?答:前两的两种创建对象的方式一次只能创建一个对象;可以利用函数的方法重复这些相同的代码,我们把这个函数称为构造函数;构造函数就是把对象里面一些相同的属性和方法封装到函数里面。

  • 构造函数的语法格式
<script>
        //创建
        function 构造函数名() {
            this.属性 =;
            this.方法 = function () {
            }
        }
        //调用
        new 构造函数名();
</script>

示例:

<script>
        function Star(uname, age, sex, song) {
            this.uname = uname;
            this.age = age;
            this.sex = sex;
             this.sing = function (song) {
                console.log(song);
            }
        }
        var ldh = new Star('刘德华', 18, '男');
        console.log(ldh.uname);
        console.log(ldh.age);
        console.log(ldh.sex);
        ldh.sing('冰雨');
</script>

1.构造函数首字母必须大写
2.构造函数不需要return就可以返回结果
3.我们调用构造函数 必须使用 new
4.只要new Star() 调用函数就创建一个对象 ldh { }
5.构造函数是泛指的某一大类(class),类似于Java语言里面的类;对象特指一个具体的事物
6.利用构造函数创建对象的过程是对象实例化
7.当构造函数遇到 new 时,首先,它会在我们内存中创建了一个空的对象;其次,this就会指向刚才创建的空对象;然后,开始执行构造函数里面的代码,给这个空对象添加属性和方法;最后,返回这个对象。

看到这里,js中创建对象的三种方法就讲解完毕啦,可以自己动手多敲几个对象,new一下,哈哈~ ,new多了,就熟能生巧喽~
小练习:
JavaScript创建对象的三种方式_第2张图片

<script>
        function Yingxiong(name, type, blood) {
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function (attack) {
                console.log(attack);
            }
        }
        var lp = new Yingxiong('廉颇', '力量型', '500血量');
        console.log(lp.name);
        console.log(lp.type);
        console.log(lp.blood);
        lp.attack('近战');
        var hy = new Yingxiong('后弈', '射手型', '100血量');
        console.log(hy.name);
        console.log(hy.type);
        console.log(hy.blood);
        hy.attack('远程');

</script>

你可能感兴趣的:(web前端,javascript,开发语言,前端)