JavaScript 的 对象

学习目标:能够说出为什么需要对象

能够使用字面量创建对象

能够使用构造函数创建对象

能够说出new的执行过程

能够遍历对象

1.对象

1.1万物皆对象,对象是一个具体的事物 在程序里面,一个服务器,一张网页,一个远程服务器的连接也可以是对象。

Javascript中对象是一组无序的相关属性和方法的集合,所有事物都是对象,例如字符串,数值,数组,函数。

对象是由属性和方法组成的

属性:事物的特征,在对象中用属性来表示。(常用名词)

方法: 是事物的行为,在对象中用方法来表示  (常用动词)

1.2为什么需要对象

保存一个值,可以使用变量,保存多个值(一组值),可以使用数组,如果要保存一个人的完整信息呢?

js二点对象表达结构更清晰,更强大。张三峰的个人信息再对象中表达结构如下:

张三峰.姓名 = '张三峰';

张三峰.性别 = ’男';

张三峰.年龄 = 128;

张三峰.身高 = 154;

2.创建对象的三种方法:(object):

利用字面量创建对象: 花括号{ }表达了具体事物(对象)的属性和方法

利用 new object创建对象

利用构造函数创建对象

字面量创建对象实例:

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

New Object 创建对象

<script>
        //利用NewObject创建对象
        var obj = new Obeject(); //创建了一个空的对象。
        obj.uname = '张三峰';
        obj.age = 18 ;
        obj.sex = '男';
        obj.sayHi = function(){
           console.log('hi-');
        }
        //(1)我们利用等号 = 赋值的方法 添加对象的属性和方法
        //(2)每个属性和方法之间用分号结束
        console.log(obj.uname);
        console.log(obj[uname]);

        var obj1 = new Object();
        obj1.name = '鸣人';
        obj1.sex = '男';
        obj.age  = '19岁';
        obj.skill = function(){
            console.log('影分身术');
        }
    </script>

我们为什么需要构造函数?

<script>
        //我们为什么需要构造函数
        //就是因为我们前面两种创建对象的方式只能创建一个对象
        var ldh = {
            uname: '刘德华',
            age: 55,
            sing: function(){
                console.log('冰雨');
            }
        }
        //因为我们一次创建一个函数,里面很多的属性和方法是大量相同的 我们只能复制
        //因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为构造函数
        //又因为这个函数不一样 里卖弄封装的不是普通代码 而是 对象
        //构造函数 就是把我们对象里面的一些相同的属性和方法抽象出来封装到函数里面

    </script>

3.利用构造函数创建对象

<script>
        //构造幻术的基本格式
        //四大天王的对象 相同的属性:名字,年龄,性别 相同的特点:唱歌
        // function 构造函数名(){
        //     this.属性 = 值;
        //     this.方法 = function(){}
        // }
        //new 构造函数名();
        function Star(uname,age,sex){
            this.uname =uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang){
                console.log(sang);
            }
        }

        var ldh = new Star('刘德华',18,'男') //调用函数返回的是一个对象

        ldh.sing('冰雨');
        //console.log(typeof ldh)
        console.log(ldh.uname);
        console.log(ldh['sex']);
        var zxy = new Star('张学友',20 ,'男');
        console.log(zxy.uname);
        console.log(zxy.age);
        //1.构造函数的名字首字母要大写

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

        function Hero(name,type,blood){
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function(fangshi){
                console.log(fangshi);
                }
        }
        var lianpo = new Hero('廉颇','力量型','500血量');
        lianpo.attack('近战');
        console.log(lianpo.name);

        var houyi = new Hero('后裔','射手型','100血量');
        console.log(houyi.name);

        houyi.attack('远程');
    </script>

4.构造函数和对象的相互联系

<script>
        //构造函数和对象
        //1.构造函数 明星 泛指的某一大类 它类似于java语言的类(class)
           function Hero(name,type,blood){
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function(fangshi){
                console.log(fangshi);
                }
        }
        //2.对象 特指某一个 是一个具体的事物 刘德华
        var lianpo = new Hero('廉颇','力量型','500血量');
        lianpo.attack('近战');
        console.log(lianpo.name);
        //3.我们利用构造函数创建对象的过程我们也称为对象的实例化  构造函数也可以创建对象。
    </script>

5.new对象的执行过程

<script>
        //new 关键词的执行过程
        //1.new 构造函数可以在内存中创建一个空对象
        //2.this 就会指向刚才创建的空对象
        //3.执行构造函数里面的代码 给这个空对象添加属性和方法
        //4.返回这个对象(所以构造函数不需要return)
           function Hero(name,type,blood){
            this.name = name;
            this.type = type;
            this.blood = blood;
            this.attack = function(fangshi){
                console.log(fangshi);
                }
        }
        var lianpo = new Hero('廉颇','力量型','500血量');
        lianpo.attack('近战');
        console.log(lianpo.name);
    </script>

6.javascript 遍历对象属性

for (var k in obj){
            console.log(k); //k 变量 ,输出得到的是属性名
            console.log(obj[k]);   //obj[k]得到的是属性值   obj[k]
        }
<script>
        //遍历对象
        var obj = {
            name: '原雪峰',
            age:   '18',
            sex:    '男',
            fn:   function(){
                console.log('fff');

            }
        }
        console.log(obj.name);
        console.log(obj.age);
        console.log(obj.sex);
        //如何一次性打印?SSS
        // for in 遍历我们的对象
        /* for (变量 in 对象)
        {

        } */
        for (var k in obj){
            console.log(k); //k 变量 ,输出得到的是属性名
            console.log(obj[k]);   //obj[k]得到的是属性值   obj[k]
        }
        //我们使用for in 里面的变量 我们喜欢 k 或者 key
    </script>

7.JavaScript小结:

1.对象可以让代码结构更清晰

2.对象复杂数据类型object

3.本质:对象就是一组无序的相关属性和方法的集合

4.构造函数泛指一大类,比如苹果,不管红色青色 都是苹果

5.对象特指一个实例

6.for (var k in object)进行循环遍历对象

(0)

相关推荐

  • JS的绑定对象this

    this的含义 this表示的是绑定的对象,通常在函数中使用. 不同的代码形式下,绑定的对象代表不同的东西. 下面看一下常见的几种代码形式: 一.独立的函数 function foo() { cons ...

  • 创建对象及原型

    一.使用Object构造函数或对象字面量创建对象 缺点:使用同一个接口创建对象,会产生大量的重复性代码. 解决方法:使用工厂模式创建对象. 1 //构造函数2 let obj1 = new Objec ...

  • JS中构造函数的方法定义在原型对象里

    构造函数中的方法每当new一个对象的时候,就会创建一个构造函数里的方法,如果多个实例对象就会创建多个方法,占用内存,没有提高代码的复用性: 将方法定义到构造函数的原型对象里,创建多个实例对象而共享一个 ...

  • 深入理解JavaScript面向对象的程序设计(一)——对象的创建

    JavaScript面向对象的程序设计(一)--对象的创建 目录 JavaScript面向对象的程序设计(一)--对象的创建 5.1 三个属性(三个指针) 5.2 理解原型对象 5.3 读取对象的属性 ...

  • 利用new Object方式创建对象

    var obj = new Object();      //创建了一个空的对象 obj.uname = 'zhangsanfeng'; obj.name = 18;       //字面量方式创建对 ...

  • js中this的指向-笔记

    普通函数:this 永远指向调用它的对象,new的时候,指向new出来的对象. 箭头函数:箭头函数没有自己的 this,当在内部使用了 this时,它会指向最近一层作用域内的 this. //例1 v ...

  • ECMAScript中的函数

    有 3 种定义函数的方式 函数声明 函数表达式 Function 构造函数(很少使用) 函数声明 function 关键字后需要指定函数名 function sum(num1, num2) { ret ...

  • 创建对象的两种方式

    使用对象字面量的方式创建对象 var obj = { name: '刘德华', age: 18, sayHi: function () { console.log('hi'); } }; // 使用对 ...

  • JS的原型和继承

    __proto__ 除null和undefined,JS中的所有数据类型都有这个属性: 它表示当我们访问一个对象的某个属性时,如果该对象自身不存在该属性, 就从它的__proto__属性上继续查找,以 ...

  • JavaScript删除对象的某个属性的方法

    WEB前端开发社区 5天前 1.delete  delete是删除对象的属性没有任何剩菜,剩下的唯一真正的方法,但它的工作比其"替代"设置慢100倍 object[key] = u ...

  • JavaScript Promise 对象 | 菜鸟教程

    ECMAscript 6 原生提供了 Promise 对象. Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息. Promise 对象有以下两个特点: 1.对象的状态不受外界影响. ...

  • 如何理解javascript的对象?

    WEB前端开发社区 2021-07-23 1.1 什么是对象? 对象是事物,在现实世界中,一个球,一张桌子,一辆汽车都是对象. 对象就是具有可描述特征的事物,我们可以用某种特定的方式去影响和操作它. ...

  • JavaScript入门-对象(二)

    JavaScript对象(二) 本篇,主要讲了面向对象.this的指向问题,模拟继承过程 面向对象编程 什么面向对象编程? 编程,编程就是人们用计算机能懂的语言,告诉计算机自己想做的事情. 面向对象的 ...

  • 前端教程:Javascript Boolean对象

    Boolean对象表示两个值:"true"或"false". Syntax: 创建一个boolean对象: var val = new Boolean(valu ...

  • javascript 数组 对象的一些方法记录

    记录一下常用的数组和对象的一些方法 数组 push() 数组后添加元素 // 作用:把一个元素或多个元素,从数组后面添加到数组里面: // 参数:添加的数据 // 返回:添加后的数组的长度: let ...

  • JavaScript日期对象 - 方法

    日期对象的方法 日期格式化方法: 格式:日期对象.方法(); alert( box.toDateString() );  以特定的格式显示星期几.月.日和年 alert( box.toTimeStri ...

  • JavaScript - 认识对象

    什么是对象? 什么是对象: 其实就是一种类型,即[引用]类型.而对象就是[引用类型]的实例.在ECMAScript 中引用类型是一种[数据结构],用于将[数据和功能]组织在一起. 分析数据存储的历程: ...

  • JavaScript - Math对象

    Math对象 在我们js中其实是有很多数学计算的需求的,不过不必担心 系统给我们提供了大量的数学运算的方法供我们使用 而这些方法全都存在于我们的Math对象中 Math常用的属性:Math.PI 相当 ...

  • JavaScript 全局对象

    全局属性和函数可用于所有内建的JavaScript 对象.顶层函数(全局函数)函数描述decodeURI()解码某个编码的 URI.decodeURIComponent()解码一个编码的 URI 组件 ...