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

我会带着你远行 2021-11-09 22:46 254阅读 0赞

个人博客网：[https://wushaopei.github.io/][https_wushaopei.github.io]    (你想要这里多有)

一、编程思想

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关键字代表当前的对象

普通创建人的对象

工厂模式出现的原因：

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

工厂模式创建对象

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();

创建对象的图解:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70][]

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

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

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格式的数据

*  对象:有属性和方法,特指的某个事物
 *  对象:一组无序属性的集合的键值对,属性的值可以是任意的类型

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）值类型作为函数的参数,传递的是值
         引用类型作为函数的参数,传递的是地址

2、识别传递的是什么？

基本类型的值在栈上

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

> 传递的内容是：
> 
>  *  值类型之间传递的是值
>  *  引用类型之间传递的是引用(地址)

示例：

四、内置对象和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. 返回当前的新的对象

[https_wushaopei.github.io]: https://wushaopei.github.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQwNTY3MA_size_16_color_FFFFFF_t_70]: /images/20211109/92864f7169f84d52a2ceb205052a7b55.png