【 js基础 Day4】面向过程，面向对象，自定义对象，内置对象

01 复习

函数:把一些重复的代码封装在一个地方,在需要的时候直接调用这个地方的代码就可以了

函数作用:代码重用

函数的参数:
1.形参:函数定义的时候,函数名字后面的小括号里的变量
2.实参:函数调用的时候,函数名字后面的小括号里的变量或者值

返回值:
函数中有return，函数有返回值
函数中没有return,函数没有返回值
没有明确返回值:函数中没有return或者return后面没有任何内容
如果一个函数没有明确的返回值,接收这个函数,结果是undefined

无参数无返回值的函数
无参数有返回值的函数
有参数无返回值的函数
有参数有返回值的函数

 arguments----->可以获取函数调用的时候,传入的实参的个数
 arguments是一个对象,是一个伪数组
 arguments.length--->是实参的个数
 arguments[索引]---->实参的值

作用域:变量的使用范围
全局作用域:全局变量在任何位置都可以使用的范围
局部作用域:局部变量只能在某个地方使用—函数内
作用域链:在一个函数中使用一个变量,先在该函数中搜索这个变量,找到了则使用,找不到则继续向外面找这个变量,找到则使用,一直找到全局作用域,找不到则是undefined
全局变量:只要是在函数外面声明的变量都可以看成或者是理解成是全局变量
局部变量:在函数中定义的变量

预解析:在执行代码之前做的事情
变量的声明和函数的声明被提前了,变量和函数的声明会提升到当前所在的作用域的最上面
函数中的变量声明,会提升到该函数的作用域的最上面(里面)
如果有多对的script标签都有相同名字的函数,预解析的时候是分段的,互不影响

  var str = prompt("请输入一个数字");
   //用户没有输入内容
   if (str == "") {
     console.log("您输入有误");
   } else {
     //用户输入内容了
     if (!isNaN(parseInt(str))) {
       console.log("用户输入的是一个数字");
       //调用一个函数,把这个数字传入到函数中,判断该数字是不是质数
     } else {
       console.log("用户输入的不是一个数字");
     }
   }

如何判断一个数字是质数

 var num=7;
 function isPrimeNumber(num) {
   for(var i=2;i<=num/2;i++){
     if(num%i==0){
       return false;
     }
   }
   return true;
 }
 console.log(isPrimeNumber(num));

02 课程介绍

理解的------------------------
面向过程
面向对象
对象

重点-----需要写出代码—能够说出来----
创建对象的不同的方式

自定义对象----重点----能够写出来

数据类型深入:

理解的----------------------------
简单的类型和复杂类型---------- 画图理解数据的值在哪个空间中存储

重点：------每个对象下的常见的方法的使用
内置对象

03 编程思想

编程思想:把一些生活中做事的经验融入到程序中
面向过程:凡事都要亲力亲为,每件事的具体过程都要知道,注重的是过程
面向对象:根据需求找对象,所有的事都用对象来做,注重的是结果

面向对象特性:封装,继承,多态 (抽象性)
js不是面向对象的语言,但是可以模拟面向对象的思想
js是一门基于对象的语言:
万物皆对象:---------->程序猿 程旭媛

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

找对象
描述找对象
文字描述找对象
小明牵着小黄去逛街
一台电视机正在播放影片

分析对象有什么特点:特征和行为

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

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

没有对象？创建对象

04 创建对象

创建对象三种方式:
1.调用系统的构造函数创建对象
var 变量名= new Object(); Object 是系统的构造函数 Array
2.自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象)
3.字面量的方式创建对象

第一种创建对象的方式

 //小苏举例子:
  //实例化对象
  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();

练习:有一个黄色的小狗,叫大黄,今年已经三岁了,250斤的重量每次走路都很慢,喜欢吃大骨头
练习:创建一个手机对象,手机有型号,有颜色,可以打电话和发短信

05 创建对象练习

练习:有一个黄色的小狗,叫大黄,今年已经三岁了,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();

06 工厂模式常见对象

如何获取该变量(对象)是不是属于什么类型的?
语法:
变量 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();

07 自定义构造函数创建对象

自定义构造函数创建对象,我要自己定义一个构造函数,自定义构造函数,创建对象
函数和构造函数的区别；名字是不是大写(首字母是大写)

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

08 自定义构造函数创建对象做了几件事

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

通过自定义构造函数实现下面的例子:

创建一个图片的对象,图片有宽,有高,有大小(4M),图片可以展示内容
创建一个小猫的对象,猫有颜色，体重，年龄,小猫可以抓耗子,可以打架

09 创建对象的图解

1 调用构造函数创建对象

 var obj=new Object();

2.自定义构造函数创建对象

自定义构造函数

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

创建对象----实例化一个对象,并初始化

var per=new Person("小明",20);
per.name="张三";

四件事:

1. 开辟空间,存储创建的新的对象
2. 把this设置为当前的对象
3. 设置对象的属性和方法的值
4. 返回创建后新的对象

10 字面量的方式创建对象

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

11 总结对象

字面量创建对象的缺陷: 一次性的对象

  var obj={
    name:"小明",
    age:38,
    sex:"女"
  };
  obj.name="小三";
  console.log(obj.name);

  点语法:   对象.名字=值; 对象.名字=函数;
  没有什么点,就有了

js是一门什么样的语言?

• 是一门解释性的语言

• 是一门脚本语言

• 是一门弱类型语言,声明变量都用var

• 是一门基于对象的语言

• 是一门动态类型的语言

代码(变量)只有执行到这个位置的时候,才知道这个变量中到底存储的是什么,如果是对象,就有对象的属性和方法,如果是变量就是变量的作用
对象没有什么,只要点了,通过点语法,那么就可以为对象添加属性或者方法

 var obj = {};//空对象
 obj.name = "看名字";
 obj.age = 10;
 obj.fly = function () {
   console.log("飞吧");
 };

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

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

13 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?"男":"女");
 
 var sex=true;//男
 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]);
      }
  对象中确实有这个属性对象.属性名字  或者对象[属性名字]


  //一个一个的遍历出来

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

14 简单类型和复杂类型

原始数据类型: number,string,boolean,undefined, null,object
基本类型(简单类型),值类型: number,string,boolean
复杂类型(引用类型):object
空类型:undefined,null
值类型的值在哪一块空间中存储? 栈中存储
引用类型的值在哪一块空间中存储?对象在堆上存储,地址在栈上存储

var num=10;//值类型,值在栈上
var obj={};//复杂类型,对象在堆,地址(引用)在栈

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

值类型作为函数的参数,传递的是值
引用类型作为函数的参数,传递的是地址

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

15 识别传递的是啥

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

16 内置对象

js学习中三种对象:
1.内置对象----js系统自带的对象
2.自定义对象—自己定义的构造函数创建的对象
3.浏览器对象—BOM的时候讲

内置对象:
Math
Date
String
Array
Object

//如何验证变量是不是对象
 console.log(Array instanceof Object);
 var obj={};
 console.log(obj instanceof Object);

17 Math对象

MDN----在线的帮助文档

实例对象:通过构造函数创建出来,实例化的对象
静态对象:不需要创建,直接就是一个对象,方法(静态方法)直接通过这个对象名字调用,
实例方法必须通过实例对象调用
静态方法必须通过大写的对象调用

Math.PI----π---
Math.E----常数的底数
Math.abs(值)-----绝对值
Math.ceil(值)----向上取整
Math.floor(值)---向下取整

 console.log(Math.PI);
 console.log(Math.E);
 console.log(Math.abs(-2));
 console.log(Math.ceil(2.77));
 console.log(Math.floor(2.77));
 console.log(Math.fround(2.77));
 console.log(Math.max(2,2,88,5,3,44,777));
 console.log(Math.min(2,2,88,5,3,44,777));
 console.log(Math.pow(2,4));//16
 console.log(Math.sqrt(2,4));//16
 console.log(Math.random());//16





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));
console.log(Math.ceil(12.9));
console.log(Math.ceil(12.09));
console.log(Math.ceil(12.03));
console.log(Math.ceil(12.92));


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

console.log(Math.fround(2));
console.log(Math.fround(2.1));
console.log(Math.fround(2.9));

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

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

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

18 小结

方法1：系统调用函数

  var computer=new Object();
  computer.color="red";
  computer.weight="54";
  computer.brand="你好";
  computer.sex="细心";
  computer.movie=function(){
    console.log("好好看哦");
  }
  computer.music=function(){
    console.log("好好听啊");
  }
  computer.play=function(){
    console.log("好好玩哦");
  }
  computer.knock=function(){
    console.log("酷酷的");
  }
  computer.movie();
  computer.music();
  computer.play();
  computer.knock();

方法2：自定义构造函数（不太会运用）

 function Compute(color,weight,brand,sex){
   this.color="red";
   this.weight=11;
   this.brand="nih";
   this.sex="hjadg";
   this.movie=function(){
    //console.log("电影"+this.movie)
    console.log("颜色是"+this.color+",体重是"+this.weight+"品牌是"+this.brand+"型号是"+this.sex)
   }
   this.music=function(){
    console.log("音乐"+this.movie)
   }
   this.play=function(){
    console.log("游戏"+this.movie)
   }
   this.knock=function(){
    console.log("代码"+this.movie)
   }
 }
 // this.movie();Uncaught TypeError: this.movie is not a function
 var obj=new Compute("red",101,"你好","哎呀");
 console.log(obj.color);//undefined
 console.log(obj.weight);
 console.log(obj.brand);
 console.log(obj.sex);


  // console.log("obj.color");错误写法！！！不用双引号的！！
 //this只能调用类的变量,不能调用参数,形参是用来赋值的，不是用来被赋值的

 Compute.movie();//Uncaught TypeError: Compute.movie is not a function
 Compute.music();
 Compute.play();
 Compute.knock();

通过字面量的方式创建对象

 var Compute = {
   color: "red",
   weight: 11,
   brand: "sss",
   sex: "sssss",
   lookMovie:function(){
     console.log("好好看哦")
   },
   music:function(){
     console.log("好好听哦")
   }
 };
 console.log(Compute.color);
 console.log(Compute.weight);
 console.log(Compute.brand);
 console.log(Compute.sex);
 Compute.music();
 Compute.lookMovie();

工厂模式

  function creatComputer(color,weight,brand,sex){
    var obj=new Object();
    //添加属性
    obj.color=color;
    obj.weight=weight;
    obj.brand=brand;
    obj.sex=sex;
    //添加方法
    obj.movie=function(){
      console.log("颜色是"+this.color+",体重是"+this.weight+",品牌是"+this.brand)
    }
    return obj;
  }
  
   var aa=creatComputer("red",11,"www","2222dds");
   aa.movie();
   var bb=creatComputer("reeed",1e1,"wweeew","2ee222dds");
   bb.movie();

其他参考链接

【 js基础 Day1】js的介绍及基本语法变量,运算符

【 js基础 Day2】js的流程控制:分支语句,循环.顺序结构

【 js基础 Day3】关键字的使用，数组（重点）和函数（重点）

【 js基础 Day4】面向过程，面向对象，自定义对象，内置对象

【 js基础 Day5】函数(重点)，作用域，预解析，arguments，对象

【 js基础 Day6】内置对象和基本包装类型等知识

【如果你不是新手】推荐链接

【js高级 Day1】深入理解原型及作用,构造函数和实例对象和原型对象之间的关系

【js高级 Day2】深入理解原型添加方法,私有函数,面向对象的编程思想（案例小贪吃蛇）

【js高级 Day3】深入理解原型的方式继承，借用构造函数继承，组合继承，拷贝继承

【js高级 Day4】深入理解apply和call方法，作用域，闭包，递归

【js高级 Day5】深入理解浅拷贝，深拷贝，遍历DOM树，正则表达式