码迷，mamicode.com
首页 > 编程语言 > 详细

JavaScript (五) js的基本语法 - - - 面向对象、工程模式、内置对象、JSON

时间：2019-10-22 12:55:10      阅读：136      评论：0      收藏：0      [点我收藏+]

标签：ali   pca   工厂模式   wrap   type   lan   打电话   数字   循环   

一、编程思想

1、定义：

 编程思想:把一些生活中做事的经验融入到程序中

 面向过程:凡事都要亲力亲为,每件事的具体过程都要知道,注重的是过程

 面向对象:根据需求找对象,所有的事都用对象来做,注重的是结果
技术图片

面向对象特性:封装,继承,多态 (抽象性)

  • js不是面向对象的语言,但是可以模拟面向对象的思想
  • js是一门基于对象的语言: 万物皆对象:---------->程序猿 程旭媛

什么是对象？  看的见,摸得到,具体特指的某个东西

2、对象分享有什么特点： 特征和行为

对象 :  有特征和行为,具体特指的某一个事物

对象 :  有属性和方法,具体特指的某个事物

二、对象及其创建方式

1、创建对象 的三种方式：

(1)调用系统的构造函数创建对象

var 变量名= new Object(); Object 是系统的构造函数 Array

示例：

        //实例化对象
        var obj = new Object();
        //对象有特征---属性和行为---方法
        //添加属性-----如何添加属性?  对象.名字=值;
        obj.name = "小苏";
        obj.age = 38;
        obj.sex = "女";
        //添加方法----如何添加方法? 对象.名字=函数;
        obj.eat = function () {
            console.log("我喜欢吃油炸榴莲凉拌臭豆腐和大蒜");
        };
        obj.play = function () {
            console.log("我喜欢玩飞机模型");
        };
        obj.cook = function () {
            console.log("切菜");
            console.log("洗菜");
            console.log("把菜放进去");
            console.log("大火5分钟");
            console.log("出锅");
            console.log("凉水过一下");
            console.log("放料,吃");
        };
        console.log(obj.name);//获取--输出了
        console.log(obj.age);
        console.log(obj.sex);
        //方法的调用
        obj.eat();
        obj.play();
        obj.cook();
技术图片

(2)自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象)

(3)字面量的方式创建对象

2、创建对象练习：

①  练习:有一个黄色的小狗,叫大黄,今年已经三岁了,250斤的重量每次走路都很慢,喜欢吃大骨头

        //创建对象
        var smallDog=new Object();
        smallDog.name="大黄";
        smallDog.age=3;
        smallDog.color="黄色";
        smallDog.weight="250";
        smallDog.eat=function () {
            console.log("我要吃大骨头");
        };
        smallDog.walk=function () {
            console.log("走一步摇尾巴");
        };
        smallDog.eat();//方法的调用
        smallDog.walk();
技术图片

②练习:创建一个手机对象,手机有型号,有颜色,可以打电话和发短信

        var phone=new Object();
        phone.size="iphone8";
        phone.color="黑色";
        phone.call=function () {
            console.log("打电话");
        };
        phone.sendMessage=function () {
            console.log("你干啥捏,我烧锅炉呢");
        };

        phone.call();
        phone.sendMessage();
技术图片

3、工厂个模式常见对象

语法:

        变量 instanceof 类型的名字----->布尔类型,true就是这种类型,false不是这种类型
        在当前的对象的方法中,可以使用this关键字代表当前的对象
技术图片

普通创建人的对象

           var person=new Object();
           person.name="小白";
           person.age=10;
           person.sayHi=function () {
             //在当前这个对象的方法中是可以访问当前这个对象的属性的值
               console.log("您好,吃了没您,我叫:"+this.name);
           };
           //学生的对象
           var stu=new Object();
           stu.name="小芳";
           stu.age=18;
           stu.study=function () {
             console.log("学习,敲代码,今天作业四遍,我今年"+this.age+"岁了");
           };
           //小狗的对象
           var dog=new Object();
           dog.name="哮天犬";
           dog.say=function () {
             console.log("汪汪...我是哮天犬");
           };

           //输出人是不是人的类型
           console.log(person instanceof Object);
           console.log(stu instanceof Object);
           console.log(dog instanceof Object);
技术图片

工厂模式出现的原因：

  • 如何一次性创建多个对象?把创建对象的代码封装在一个函数中

工厂模式创建对象

        function createObject(name,age) {
            var obj = new Object();//创建对象
            //添加属性
            obj.name = name;
            obj.age = age;
            //添加方法
            obj.sayHi = function () {
                console.log("阿涅哈斯诶呦,我叫:" + this.name + "我今年:" + this.age);
            };
            return obj;
        }
        //创建人的对象
        var per1 = createObject("小芳",20);
        per1.sayHi();
        //创建一个人的对象
        var per2 = createObject("小红",30);
        per2.sayHi();
技术图片

4、自定义构造函数创建对象,我要自己定义一个构造函数,自定义构造函数,创建对象

函数和构造函数的区别；名字是不是大写(首字母是大写)

        function Person(name,age) {
            this.name=name;
            this.age=age;
            this.sayHi=function () {
                console.log("我叫:"+this.name+",年龄是:"+this.age);
            };
        }
技术图片
自定义构造函数创建对象:先自定义一个构造函数,创建对象
技术图片
        var obj=new Person("小明",10);
        console.log(obj.name);
        console.log(obj.age);
        obj.sayHi();

        var obj2=new Person("小红",20);
        console.log(obj2.name);
        console.log(obj2.age);
        obj2.sayHi();


        console.log(obj instanceof Person);
        console.log(obj2 instanceof  Person);
技术图片
自定义狗的构造函数,创建对象
技术图片
        function Dog(name,age,sex) {
            this.name=name;
            this.age=age;
            this.sex=sex;
        }
        var dog=new Dog("大黄",20,"男");
        console.log(dog instanceof Person);//false
        console.log(dog instanceof Dog);
技术图片

5、自定义构造函数创建过程中做了几件事？

解析：

1.在内存中开辟(申请一块空闲的空间)空间,存储创建的新的对象
2.把this设置为当前的对象
3.设置对象的属性和方法的值
4.把this这个对象返回
技术图片

示例：

        function Person(name,age) {
            this.name=name;
            this.age=age;
            this.sayHi=function () {
                console.log("我叫:"+this.name+",年龄是:"+this.age);
            };
        }

        //创建对象
        var obj=new Person("小明",10);
        console.log(obj.name);
        console.log(obj.age);
        obj.sayHi();
技术图片

创建对象的图解:

技术图片技术图片?

6、字面量的方式创建对象

        var obj={};
        obj.name="小白";
        obj.age=10;
        obj.sayHi=function () {
            console.log("我是:"+this.name);
        };
        obj.sayHi();
        var obj2={
            name:"小明",
            age:20,
            sayHi:function () {
                console.log("我是:"+this.name);
            },
            eat:function () {
                console.log("吃了");
            }
        };
        obj2.sayHi();
        obj2.eat();
技术图片

缺点：字面量创建对象是 一次性的对象.

7、设置和获取属性的另一种写法

        function Person(name,age) {
            this.name=name;
            this.age=age;
            this.play=function () {
                console.log("喜欢玩游戏");
            };
        }
        var obj=new Person("卡卡西",20);
        //obj.name="佐助";

        obj["name"]="佐助";
        console.log(obj["name"]);

        obj.play();
        obj["play"]();

        console.log(obj.name);
           console.log(obj.age);
           obj.play();
技术图片

8、JSON格式的数据

  • 对象:有属性和方法,特指的某个事物
  • 对象:一组无序属性的集合的键值对,属性的值可以是任意的类型
           function Dog(name) {
             this.name=name;
           }
           function Person(name,age) {
             this.age=age;
             this.name=name;
             this.sex=true;
             this.dog={};
             this.play=function () {
               console.log("喜欢玩游戏");
             };
           }

           var sex=false;//男
           console.log(sex?"男":"女");
技术图片

JSON格式的数据：一般都是成对的，是键值对

JSON也是一个对象，数据都是成对的，一般json格式的数据无论是键还是值都是用双引号括起来的.

        var obj={
             name:"小明"
           };

        var json = {
            "name": "小明",
            "age": "10",
            "sex": "男"
        };
技术图片

遍历对象，是不能通过for循环遍历，无序

        //key是一个变量,这个变量中存储的是该对象的所有的属性的名字
        for (var key in json) {
            console.log(key + "===========" + json[key]);
        }
         
        var key="name";
        console.log(json[key]);
技术图片

可以通过 for-in 循环

           for(var key in json){
             //console.log(key);//json对象中的属性的名字
             console.log(json[key]);
           }
技术图片

注意 :

对象中确实有这个属性对象.属性名字  或者对象[属性名字]
技术图片

普通数值的遍历 可以使用for 循环：

           var arr=[10,20,30];
           for(var i=0;i<arr.length;i++){
             console.log(arr[i]);
           }
技术图片

三、数据类型与值传递

1、简单类型和复杂类型

  • 原始数据类型: number,string,boolean,undefined, null,object
  • 基本类型(简单类型),值类型: number,string,boolean

复杂类型(引用类型):object

空类型:undefined,null

值类型的值在哪一块空间中存储?         栈中存储

引用类型的值在哪一块空间中存储?     对象在堆上存储,地址在栈上存储

        var num=10;//值类型,值在栈上
        var obj={};//复杂类型,对象在堆,地址(引用)在栈
技术图片
（1）值类型之间传递,传递的是值
     引用类型之间传递,传递的是地址(引用)

（2）值类型作为函数的参数,传递的是值
     引用类型作为函数的参数,传递的是地址
技术图片
           var num=10;
           var num2=num;//传递的值

           function f1(x) {
             x=100;
           }
           var num=10;
           f1(num);
           console.log(num);//

            var obj={
                name:"小明"
            };
            function f2(obj2) {
                obj2.name="小红";
            }
            console.log(obj.name);//
            f2(obj);
            console.log(obj.name);//
技术图片

2、识别传递的是什么？

基本类型的值在栈上

复杂类型的对象在堆上,地址(引用)在栈上

传递的内容是：

  • 值类型之间传递的是值
  • 引用类型之间传递的是引用(地址)

示例：

           var num1 = 10;
           var num2 = num1;
           num1 = 20;
           console.log(num1);//20
           console.log(num2);//10


           var num = 50;
           function f1(num) {
             num = 60;
             console.log(num);//60
           }
           f1(num);
           console.log(num);//50


           var num1 = 55;
           var num2 = 66;
           function f1(num, num1) {
             num = 100;
             num1 = 100;
             num2 = 100;
             console.log(num);//100
             console.log(num1);//100
             console.log(num2);//100
           }

           f1(num1, num2);

           console.log(num1);//55
           console.log(num2);//100
           console.log(num);// 报错

            function Person(name,age,salary) {
            this.name = name;
            this.age = age;
            this.salary = salary;
            }
          
            function f1(person) {
                person.name = "ls";
                person = new Person("aa",18,10);
            }

            var p = new Person("zs",18,1000);
            console.log(p.name);
            f1(p);
        console.log(p.name);
技术图片

四、内置对象和Math对象

1、内置对象：

js 中有三种对象:

  1. 内置对象----js系统自带的对象
  2. 自定义对象---自己定义的构造函数创建的对象 （自己写的）
  3. 浏览器对象---浏览器的

内置对象：

        Math、Date、String、Array、Object

验证变量是不是对象的方式：

           console.log(Array instanceof Object);
           var obj={};
           console.log(obj instanceof Object);
技术图片

2、Math对象

实例对象: 通过构造函数创建出来,实例化的对象

静态对象: 不需要创建,直接就是一个对象,方法(静态方法)直接通过这个对象名字调用,

  • 实例方法必须通过实例对象调用
  • 静态方法必须通过大写的对象调用
        Math.PI----π---
        Math.E----常数的底数
        Math.abs(值)-----绝对值
        Math.ceil(值)----向上取整
        Math.floor(值)---向下取整
技术图片

简单示例：

           console.log(Math.PI);
           console.log(Math.E);

           var mt=new Math();

           console.log( Math.abs(‘-1‘));//1

           console.log( Math.abs(-2));//2
           console.log(Math.abs(null));//---------0  重点
           console.log(Math.abs("string"));//NaN

           console.log(Math.ceil(12.3));//13
           console.log(Math.ceil(12.9));//13
           console.log(Math.ceil(12.09));//13
           console.log(Math.ceil(12.03));//13
           console.log(Math.ceil(12.92));//13

           console.log(Math.floor(12.3));//12
           console.log(Math.floor(12.9));//12
           console.log(Math.floor(12.09));//12
           console.log(Math.floor(12.03));//12
           console.log(Math.floor(12.92));//12

           console.log(Math.fround(2));//2
           console.log(Math.fround(2.1));//2.0999999046325684
           console.log(Math.fround(2.9));//2.9000000953674316

           //找一坨数字中的最大值

           console.log(Math.max(10,1,9,100,200,45,78));//200
           console.log(Math.min(10,1,9,100,200,45,78));//1
           console.log(Math.pow(2,4));//16
           console.log(Math.sqrt(16));//4

           //0-4  没有5
           console.log(parseInt(Math.random()*5)+1);//4
           console.log(parseInt(Math.random()*100)+1);//89
技术图片

重点总结：

  Math 是一个对象,但是不是一个函数
  Math对象下的属性和方法都是静态
 
  方法:
  Math.ceil()---向上取整
  Math.floor()---向下取整
  Math.Pi----圆周率的值
  Math.Max()---一组数字中的最大值
  Math.Min()---一组数字中的最小值
  Math.abs()----绝对值
  Math.random---随机数字
  Math.sqrt()----开平方
  Math.pow()----一个数字的多少次幂 
 
  new 的执行过程:----->new的时候，系统做了什么事?
  1. 开辟空间,存储创建的新的对象
  2. 把this设置为当前的对象
  3. 设置属性和方法的值
  4. 返回当前的新的对象
技术图片

JavaScript (五) js的基本语法 - - - 面向对象、工程模式、内置对象、JSON

标签：ali   pca   工厂模式   wrap   type   lan   打电话   数字   循环   

原文地址：https://www.cnblogs.com/wushaopei/p/11718802.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！