JS笔记之第五天

编程思想：把一些生活中做事的经验融入到程序中（仅个人理解）

面向过程：凡是都要亲力亲为，每件事的具体过程都要知道，注重的是过程（仅个人理解）

面向对象：根据需求找对象，把所有的是都用对象来做，注重的是结果（仅个人理解）

面向对象的特性：封装，继承，多态（抽象性）

JS不是面向对象的语言，但是可以模拟面向对象的思想。

JS是一门基于对象的语言。

对象

什么是对象？

看得见，摸得到，具体特指某个东西。（这三个有可能是或者的关系）

现实生活中：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。

举例：一部车，一部手机，一个人

车是一类事物，门口停的那辆车才是对象

特征：红色、四个轮子

行为：驾驶、刹车

JavaScript中的对象

JavaScript中的对象其实就是生活中对象的一个抽象
JavaScript的对象是无序属性的集合。
其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数。

对象的定义（概念）：有特征（属性）和行为（方法），具体特指某一个事物。

特征---属性；事物的特征在对象中用属性来表示。

行为---方法；事物的行为在对象中用方法来表示。

如何寻找对象？

描述找对象、文字描述找对象

创建对象的三种方式：

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

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

var  变量名=new Object（）；

Object是系统的构造函数

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

如何获取该变量（对象）是属于什么类型的？

语法：

变量 instanceof 类型的名字----->结果是布尔类型，turn就是这个类型，false就不是这个类型。

在当前的对象的方法中，可以使用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();

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

console.log(obj instanceof Person);//  验证是不是人这个类型的
console.log(obj2 instanceof Person);//  验证是不是人这个类型的

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

function Dog(name,age) {
this.name=name;
this.age=age;
}

var dog=new Dog("小黄狗",2);
console.log(dog.name);
console.log(dog.age);

console.log(dog instanceof Person);//flase  验证是不是人这个类型的
console.log(dog instanceof Dog);//ture    验证是不是狗这个类型的
console.log(Dog instanceof Dog);//false 错误的写法，不人这么写
// console.log(dog instanceof Dog);里面的dog不要写自定义对象的名字，否则就是false，要用定义的变量去验证

创建对象

var obj=new Person("小明",24);//执行这行代码做了四件事（这是由系统做的）
/*
* 1.在内存中开辟（申请一块空闲的空间）空间，存储创建的新的对象
* 2.把this设置为当前的对象
* 3.设置对象的属性和方法的值
* 4.把this这个对象返回
* */

console.log(obj.name);
console.log(obj.age);
obj.sayHi();

3.字面量的方式创建对象

var obj={}//空对象
//添加属性
obj.name="小白";
obj.age=10;

//添加方法
obj.sayHi=function () {
    console.log("我叫："+this.name);
};
//obj.sayHi();

//优化后的写法：（这个是固定写法，是一个整体，不像上面是分开的，要用这种方法）
var obj={
name:"小白",
age:10,//这里的逗号要加上
sayHi:function () {
      console.log("我叫"+this.name);
},

eat:function () {
}//这个如果是最后一个，那么就不用加英文逗号，如果还要加方法，就要写逗号
};
//obj.sayHi();

字面量创建对象的缺陷：一次性对象（在一开始就已经把值给写固定了，无法灵活传值）

var obj={
    name:"小白",//已经写固定了，无法再更改
    age:24,
    sex:"女",
};
obj.name="小红";//重新命名
console.log(obj.name);//小红

点语法--->（也就是）对象.名字=值对象.名字=函数

这就是点语法，没有什么点什么。

访问属性的另一种写法: 把点语法改为中括号[ ]，用字符串的方式显示

例如：

 function Person(name,age) {
            this.name=name;
            this.age=age;
            this.play=function () {
                console.log("喜欢打游戏")
            };
        }

        var obj3=new Person("小七",20);
        console.log(obj3.name);
        console.log(obj.age);
 
        obj["name"]="小六";//用中括号的方式，代替点语法，里面要用冒号用字符串的方式
        console.log(obj["name"]);//用中括号的方式，以字符串的形式显示
        obj["age"]=22;
        console.log(obj["age"]);
        obj3.play();//用点的方式
        obj3["play"]();//用中括号的方式，后面的括号不用忘记写，中间的冒号不要忘记加上

对象：有属性和方法，特指某个事物

对象：一组无序属性的集合的键值对，属性的值可以是任意类型

对象的使用

遍历对象的属性

通过for..in语法可以遍历一个对象

var obj = {};
    for (var i = 0; i < 10; i++) {
    obj[i] = i * 2;
}
for(var key in obj) {
   console.log(key + "==" + obj[key]);
}

删除对象的属性

delete 删除

function fun() { 
   this.name = 'mm';
}

var obj = new fun(); 
 console.log(obj.name); // mm 
delete obj.name;
 console.log(obj.name); // undefined

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

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

例如：

var json={
    "name":"小明",
    "age":"10",
    "sex":"男",

   };

//遍历对象，是不能通过for循环遍历的，因为对象是无序的

//推导过程
        console.log(json.name);//通过点的方式显示
        console.log(json["name"]);//通过中括号的方式显示
 
        var key="sex";
        console.log(json["name"]);//"name"字符串类型，key是变量，存储的是字符串，可以改为：
        console.log(json[key]);//当key="name"、key="age"和key="sex";console.log(json[key]);里面的key不用改
        //key存储的是这个对象的名字

        var key="height";//里面没有height这个字符串
        console.log(json[key]);//所以key变为undefined
/*为什么会变为undefined呢？
* JS是一门动态类型的语言，没有的对象或者属性，可以点，点完之后赋值了。如果没有赋值就是undefined。
* json.fafafrfa    点了之后就有了这个对象，但是没有赋值，所以是undefined。
* console.log（json.fafafrfa）;点了之后有这个属性，但是没有赋值，所以是undefined
* json.fafafrfa=10；点完之后赋值了
* console.log（json.fafafrfa）;//点完之后赋值了，所以能显示出来
* */

 

/*
var json={
    "name":"小明",
    "age":"10",
    "sex":"男",
 };
这里面有三个属性

* */
var key="height";
console.log(json["name","age"]);//显示出来只有10，是不对的，应该显示的是小明和10，语法上是支持的，最终结果只显示了10。
//这种写法做不到把一个属性一个属性输入进去显示出来。这个办法是行不通的。


//不能通过for循环，可以通过for-in循环
        for (var key in json){
            console.log(key);//key存储的json对象中的属性的名字
            console.log(json.key);//json对象里面没有key属性这个名字，所以直接就出现undefined,如果要是json里面有
            //key这个值，那么他就会显示成key这个值，所以不能这么写
            console.log(json[key]);//只能这么写，因为
        }
        /*

        * key  这个名字是自定义的，只要是循环后面json这个对象就行
        * var key  定义变量
        * json 对象
        * */

//对象中确实有这个属性 对象.属性名字或者对象[属性名字]    那么就不能随便点了
//json里面有这么多的数据，想要一个一个的遍历出来,通过for-in循环

最终通过for-in循环是这样子的：
for (var key in json){
    console.log(key+"========"+json[key]);
}

原有始数据类型：number、string、boolean、undefined、null、object（这里的类型不要用大写，不然有时会被当做对象）

原始数据类型又分为：

1.基本类型（简单类型）：也可以叫值类型：number，string，boolean

2.复杂类型（引用类型）：object

3.空类型：nudefined，null

如果只是单单的说JS里面的基本类型，那么除了object，其他都是。

如果是说JS的值类型，那么就是number，string和boolean

简单类型和复杂类型的区别

基本类型又叫做值类型，复杂类型又叫做引用类型

值类型：简单数据类型，基本数据类型，在存储时，变量中存储的是值本身，因此叫做值类型。

引用类型：复杂数据类型，在存储是，变量中存储的仅仅是地址（引用），因此叫做引用数据类型。

堆和栈

堆栈空间分配区别：
　　1、栈（操作系统）：由操作系统自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；
　　2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收，分配方式倒是类似于链表。

注意：JavaScript中没有堆和栈的概念，此处我们用堆和栈来讲解，目的方便理解和方便以后的学习。

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

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

值类型之间传递，传递的是值。

引用类型之间传递，传递的是地址（也叫引用）

值类型作为函数的参数，传递的是值。

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

JS中的三种对象：

1.内置对象--->系统自带的对象

2.自定义对象--->自己定义的构造函数创建的对象

3.浏览器对象--->BOM的时候讲

内置对象分为：

Math、Data、String、Array（重点）

实例对象：通过构造函数创建出来，实例化的对象。

静态对象：不需要创建，直接就是一个对象，方法（也叫静态方法）直接通过这个对象名字调用。

实例方法必须通过实例对象调用

静态方法必须通过大写的对象调用

MDN--->在线帮助文档，如果里面的文字解释看不懂，直接输出（console.log）看下

打开MDN文档，如果看到左边有个像烧杯的图标，证明这个东西正在测试，测试的东西不稳定，不要使用它。

如何学习一个方法？

方法的功能
参数的意义和类型
返回值意义和类型
demo进行测试

内置对象：

Math

Math.PI--->圆周率π

Math.E--->常数的底数

Math.abs（值）--->绝对值（取绝对值）

Math.ceil（值）--->向上取整（无论数字的小数位是多少，都前进一位取整，不是四舍五入）

Math.floor（值）--->向下取整

Math.max（多个值）--->找出最大值

Math.min（多个值）--->找出最小值

Math.pow（x，y）--->幂次方（x代表要求幂次方的值，y代表几次幂，（2,3），结果是2的3次幂，等于8）

Math.sqrt（值）--->平方根

Math.random（）--->伪随机数，值在0到1之间。（括号里面不能写值）

parseInt（Math.random（）*5）随机数字0到4之间

parseInt（Math.random（）*5）+1 随机数字1到5之间，加1代表着从1开始算起。后期有用

浮点指的是小数

可以直接输出看效果：

console.log(Math.PI);
console.log(Math.E);
console.log(Math.abs(-5));
console.log(Math.ceil(3.143));
console.log(Math.floor(3.143));
console.log(Math.max(1,2,3,4,5));
console.log(Math.min(1,2,3,4,5));
console.log(Math.pow(2,3));
console.log(Math.sqrt(3));
console.log(Math.random());
console.log(parseInt(Math.random()*5));
console.log(parseInt(Math.random()*5)+1);

posted @ 2020-04-17 00:07 正在追逐的萌新阅读(127) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

一个正在追逐的萌新

JS笔记之第五天

公告