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

一、编程思想

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;iconsole.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. 返回当前的新的对象