Web/06-JavaScript语法基础：面向对象和内置对象.md at 9411527deb3a8b3575d894db4ad1860b06a399f8

webcourse/Web

Fork 0

forked from theluyuan/Web

qianguyihao 9411527deb add files

2018-02-04 17:07:25 +08:00

20 KiB

Raw Blame History

面向对象的概念

对象的作用是：封装信息。比如Student类里可以封装学生的姓名、年龄、成绩等。

那为什么不用数组封装信息呢？首先，数组只能存放同一种类型的数据；其次，要功过

对象具有特征（属性）和行为（方法）。

面向对象：可以创建自定义的类型、很好的支持继承和多态。

面向对象的特征：封装、继承、多态。

创建自定义对象

创建单个自定义对象

创建一个空白的对象，举例：

    var student= new Object();

完整的举例如下：

        //调用对象
        console.log(student);   //调用对象的方法
        student.sayHi();        //调用对象的方法


        //（1）创建一个空白的对象
        var student= new Object();

        // （2）定义对象的属性
        student.name = "生命壹号";
        student.age = 26;
        // （3）定义对象的方法
        student.sayHi = function () {
            console.log(this.name + "今年的岁数是" + this.age); //如果要调用自己的name，可以使用this
        }

输出如下：

20180125_1059.png

引入：创建多个自定义对象

举例：

        var stu1 = createStudent("生命壹号");
        console.log(stu1);
        stu1.sayHi();

        console.log("------------------");

        var stu2 = createStudent("许嵩");
        console.log(stu2);
        stu2.sayHi();


        // 创建一个函数
        function createStudent(name) {
            var student = new Object();
            student.name = name;      //第一个name指的是student对象定义的变量。第二个name指的是createStudent函数的参数。二者不一样
            student.sayHi = function () {
                console.log(this.name + "厉害了");
            }
            return student;
        }

打印结果：

20180125_1121.png

上方代码中，注意student.name = name;中这两个name是不同的。另外，注意this指的是student的this。

new和this

this：

1、this只出现在函数中。

2、谁调用函数，this就指的是谁。

3、new People(); People中的this代指被创建的对象实例。

new之后：

（1）开辟内存空间，存储新创建的对象。new Object()

（2）把this设置为当前对象

（3）执行内部代码，设置对象属性和方法

（4）返回新创建的对象

因为this指的是new一个Object之后的对象实例。于是，下面这段代码：

        // 创建一个函数
        function createStudent(name) {
            var student = new Object();
            student.name = name;      //第一个name指的是student对象定义的变量。第二个name指的是createStudent函数的参数。二者不一样
		}

可以改进为：

        // 创建一个函数
        function Student(name) {
            this.name = name;       //this指的是构造函数中的对象实例
		}

注意上方代码中的注释。

于是，便得出了接下来的代码。

利用构造函数自定义对象：（改进版）

        //利用构造函数自定义对象
        var stu1 = new Student("smyh");
        console.log(stu1);
        stu1.sayHi();

        var stu2 = new Student("vae");
        console.log(stu2);
        stu2.sayHi();


        // 创建一个构造函数
        function Student(name) {
            this.name = name;    //this指的是构造函数中的对象实例
            this.sayHi = function () {
                console.log(this.name + "厉害了");
            }
        }

打印结果：

20180125_1350.png

属性绑定

暂略。

对象字面量

对象的字面量就是一个{}。里面的属性和方法均是键值对。

例如：

var o = {
            name: "生命壹号",
            age: 26,
            isBoy: true,
            sayHi: function() {
                console.log(this.name);
            }
        };

console.log(o);

控制台输出：

20180125_1834.png

json的介绍

对象字面量和json比较像，这里我们对json做一个简单介绍。

JSON：JavaScript Object Notation（JavaScript对象表示形式）。

JSON和对象字面量的区别：JSON的属性必须用双引号引号引起来，对象字面量可以省略。

json举例：

      {
            "name" : "zs",
            "age" : 18,
            "sex" : true,
            "sayHi" : function() {
                console.log(this.name);
            }
        };

注：json里一般放常量、数组、对象等，但很少放function。

另外，对象和json没有长度，json.length的打印结果是undefined。于是乎，自然也就不能用for循环遍历（因为便利时需要获取长度length）。

json遍历的方法：

json 采用 for...in...进行遍历，和数组的遍历方式不同。如下：

<script>
    var myJson = {
        "name": "smyhvae",
        "aaa": 111,
        "bbb": 222
    };

    //json遍历的方法：for...in...
    for (var key in myJson) {
        console.log(key);   //获取 键
        console.log(myJson[key]); //获取 值（第二种属性绑定和获取值的方法）
        console.log("------");
    }
</script>

打印结果：

20180203_1518.png

类和对象

函数并没有创建对象的能力，类才有。

class Customer {
    //属性
    public String Name;
    public String Age;
    public String Money;

    //方法
    public void Buy (String id,int num,double price) {
        self.money -= num * price; //记录订单
    }
}

内置对象

内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。

javascript的内置对象：

20180201_2330.jpg

内置对象：Date

Date对象的声明

写法一：

    var date1 = new Date();
    console.log(date1);

写法二：（兼容性最强）

    var date2 = new Date("2017/09/06 09:00:00");
    console.log(date2);

写法三和写法四：（不常用）

    var date3 = new Date('Wed Jan 27 2017 12:00:00 GMT+0800 (中国标准时间)');  //写法三

    var date4 = new Date(2017, 1, 27);    //写法四

以上四种写法的打印结果是：

20180202_1040.png

Date对象的方法：获取日期和时间

Date对象有如下方法：

getDate() 获取日 1-31
getDay() 获取星期 0-6（0代表周日）
getMonth() 获取月 0-11（1月从0开始）
getFullYear() 获取完整年份（浏览器都支持）
getHours() 获取小时 0-23
getMinutes() 获取分钟 0-59
getSeconds() 获取秒 0-59
getMilliseconds() 获取毫秒（1s = 1000ms）
getTime () 返回累计毫秒数(从1970/1/1午夜)

为何累计毫秒数是从1970/1/1开始算起呢？

打印结果举例：

20180202_1056.png

返回距离1970/01/01毫秒数

也就是返回：此刻时间减去 1970/01/01 的毫秒数。

代码实现：

    var date1 = Date.now();
    var date2 = +new Date();
    var date3 = new Date().getTime();
    var date4 = new Date().valueOf();

打印结果：

20180202_1100.png

举例：模拟日历

要求每天打开这个页面都能定时显示当前的日期。

代码实现：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 800px;
            margin: 200px auto;
            color: red;
            text-align: center;
            font: 600 30px/30px "simsun";
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        //模拟日历
        //需求：每天打开这个页面都能定时显示年月日和星期几

        //1.创建一个当前日期的日期对象
        var date = new Date();
        //2.然后获取其中的年、月、日和星期
        var year = date.getFullYear();
        var month = date.getMonth();
        var hao = date.getDate();
        var week = date.getDay();
//        console.log(year+" "+month+" "+hao+" "+week);
        //3.赋值给div
        var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        var div = document.getElementsByTagName("div")[0];
        div.innerText = "今天是："+year+"年"+(month+1)+"月"+hao+"日 "+arr[week];

    </script>

</body>
</html>

实现效果：

20180202_1110.png

举例：发布会倒计时

实现思路：

设置一个定时器，每间隔1毫秒就自动刷新一次div的内容。

代码实现：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 1210px;
            margin: 200px auto;
            color: red;
            text-align: center;
            font: 600 30px/30px "simsun";
        }
    </style>
</head>
<body>
<div></div>

<script>
    var div = document.getElementsByTagName("div")[0];
    var timer = setInterval(fn, 1);

    function fn() {
        var nowtime = new Date();
        var future = new Date("2019/02/03 11:20:00");
        var timeSum = future.getTime() - nowtime.getTime();  //获取时间差：发布会时间减去此刻的毫秒值
        var day = parseInt(timeSum / 1000 / 60 / 60 / 24);
        var hour = parseInt(timeSum / 1000 / 60 / 60 % 24);
        var minu = parseInt(timeSum / 1000 / 60 % 60);
        var sec = parseInt(timeSum / 1000 % 60);
        var millsec = parseInt(timeSum % 1000);

        //问题处理：所有的时间小于10的时候，在前面自动补0，毫秒值要补双0（比如如，把 8 秒改成 08 秒）
        day = day < 10 ? "0" + day : day;  //day小于10吗？如果小于，就补0；如果不小于，就是day本身
        hour = hour < 10 ? "0" + hour : hour;
        minu = minu < 10 ? "0" + minu : minu;
        sec = sec < 10 ? "0" + sec : sec;
        if (millsec < 10) {
            millsec = "00" + millsec;
        } else if (millsec < 100) {
            millsec = "0" + millsec;
        }
//        console.log(day);
//        console.log(parseInt(timeSum/1000/60/60/24));
        if (timeSum < 0) {
            div.innerHTML = "距离苹果发布会还有00天00小时00分00秒000毫秒";
            clearInterval(timer);
            return;
        }
        div.innerHTML = "距离苹果发布会还有" + day + "天" + hour + "小时" + minu + "分" + sec + "秒" + millsec + "毫秒";
    }
</script>
</body>

</html>

实现效果：

20180202_1130.gif

内置对象String

简单数据类型、复杂数据类型

1、简单数据类型：

注意，之前学习的简单数据类型string是无法绑定属性和方法的。比如说：

    var str = "smyhvae";

    str.aaa = 12;
    console.log(typeof str);  //打印结果为：string
    console.log(str.aaa);     //打印结果为：undefined

上方代码中，当我们尝试打印str.aaa的时候，会发现打印结果为：undefined。

当然，我们可以打印str.length、srt.indexOf("m")等等。因为这两个方法的底层做了数据类型转换。

2、复杂数据类型：

复杂数据类型String是可以绑定属性和方法的。如下：

    var strObj = new String("smyhvae");
    strObj.aaa = 123;
    console.log(strObj);
    console.log(typeof strObj);  //打印结果：Object
    console.log(strObj.aaa);

打印结果：

20180202_1351.png

同理，内置对象Number也有一些自带的方法，比如：

Number.MAX_VALUE;
Number.MIN_VALUE;

内置对象Boolean也有一些自带的方法，但是用的不多。

下面讲一下内置对象String的常见方法。

charAt/charCodeAt：1.2.1 给索引查字符

    字符 = Str.charAt(索引值);

解释：获取相应位置的字符。

字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。

    字符编码 = Str.charCodeAt(索引值);

解释：获取相应位置的Unicode字符编码。

举例1：

   var str = new String("smyhvae");

    for (var i = 0; i < str.length; i++) {
        console.log(str.charAt(i));
    }

打印结果：

20180202_1401.png

上面这个例子一般不用。一般打印数组和json的时候用索引，打印String不建议用索引。

举例2：打印字符串的占位长度

提示：一个英文占一个位置，一个中文占两个位置。

思路：判断该字符是否在0-127之间（在的话是英文，不在是非英文）。

代码实现：

<script>
    //    sort();   底层用到了charCodeAt();

    var str = "I love my country!我你爱中国！";

    //需求：求一个字符串占有几个字符位。
    //思路；如果是英文，站一个字符位，如果不是英文占两个字符位。
    //技术点：判断该字符是否在0-127之间。（在的话是英文，不在是非英文）
    alert(getZFWlength(str));
    alert(str.length);

    //定义方法：字符位
    function getZFWlength(string) {
        //定义一个计数器
        var count = 0;
        for (var i = 0; i < string.length; i++) {
            //对每一位字符串进行判断，如果Unicode编码在0-127，计数器+1；否则+2
            if (string.charCodeAt(i) < 128 && string.charCodeAt(i) >= 0) {
                count++;
            } else {
                count += 2;
            }
        }
        return count;
    }
</script>

打印结果：

    30
    24

从打印结果可以看出：字符串的长度是24，但是却占了30个字符位（一个中文占两个字符位）。

另外，sort()方法其实底层也是用到了charCodeAt()，因为用到了Unicode编码。

indexOf/lastIndexOf：给字符查索引

索引值 = str.indexOf/(想要查询的字符);

解释：从前向后索引字符串的位置。

因此可以得出一个技巧：如果获取的索引值为0，说明字符串是以查询的参数为开头的。

同理，lastIndexOf()是从后向前寻找。

    var str = "abcdea";

    //给字符查索引(索引值为0,说明字符串以查询的参数为开头)
    console.log(str.indexOf("c"));
    console.log(str.lastIndexOf("c"));

    console.log(str.indexOf("a"));
    console.log(str.lastIndexOf("a"));

打印结果：

20180202_1420.png

concat：字符串的链接

    新字符串 = str1.concat(str2)； 链接两个字符串

这种方法基本不用，直接两个字符串相加就好。

字符串的截取（重要）

字符串的截取有好几个方法，下面分别讲解。

1、 slice()方法：

格式：

    字符串 = str.slice(索引1，索引2); //两个参数都是索引值。

上面的参数，包左不包右。如下：

(2,5) 表示正常，包左不包右。
(2) 表示从指定的索引位置开始，剪到最后。
(-3) 表示从倒数第几个开始，剪到最后.
(5,2) 表示前面的大，后面的小，返回值为空。

2、substr()方法：

格式：

   字符串 = srt.substr(索引值, 长度);

参数解释：

(2,4)：从索引值为2的字符开始，截取4个字符。
(1)：从指定位置开始，截取到最后。
(-3)：从倒数第几个开始，剪到最后.
不包括前大后小的情况。

一些特殊方法

1、trim()：去除字符串前后的空白。

代码举例：

    //去除前后的空格，trim();
    var str1 = "   a   b   c   ";
    console.log(str1);
    console.log(str1.trim());

打印结果：

20180202_1455.png

2、replace()：替换。

举例：

    //replace()方法：替换
    var str2 = "Today is fine day,today is fine day !!!"
    console.log(str2);
    console.log(str2.replace("today","tomorrow"));  //只能替换第一个today
    console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则，才能替换所有的today

3、split()：字符串变数组。

    //split()方法：字符串变数组
    var str3 = "生命壹号|许嵩|smyhvae";

    console.log(str3);
    console.log(str3.split());   // 无参数，表示：把字符串作为一个元素添加到数组中。
    console.log(str3.split(""));  //参数为空字符串，则表示：分隔字符串中每一个字符，分别添加到数组中
    console.log(str3.split("|")); //参数为指定字符，表示：此字符将不会出现在数组的任意一个元素中
    console.log(str3.split("许")); //同理

打印结果：

20180202_1503.png

大小写转换

举例：

    var str = "abcdEFG";

    //转换成小写
    console.log(str.toLowerCase());
    //转换成大写
    console.log(str.toUpperCase());

html方法

anchor() 创建a链接
big()
sub()
sup()
link()
bold()

注意，str.link() 返回值是字符串。

举例：

    var str = "你好";

    console.log(str.anchor())
    console.log(str.big())
    console.log(str.sub())
    console.log(str.sup())
    console.log(str.link("http://www.baidu.com"));
    console.log(str.bold())

20180202_1536.png

字符串练习

练习1："smyhvaevaesmyh"查找字符串中所有m出现的位置。

代码实现：

    var str2 = "abcoefoxyozzopp";
    for(var i=0;i<str2.length;i++){
        //如果指定位置的符号=== "o"
        //str2[i]
        if( str2.charAt(i)==="o"){
            console.log(i);
        }
    }

**练习2：**判断一个字符串中出现次数最多的字符，统计这个次数

<script>
    var str2 = "smyhvaevaesmyhvae";

    //定义一个json，然后判断json中是够有该属性，如果有该属性，那么值+1;否则创建一个该属性，并赋值为1；
    var json = {};
    for (var i = 0; i < str2.length; i++) {
        //判断：如果有该属性，那么值+1;否则创建一个该属性，并赋值为1；
        var key = str2.charAt(i);
        if (json[key] === undefined) {
            json[key] = 1;
        } else {
            json[key] += 1;
        }
    }
    console.log(json);


    console.log("----------------");
    //获取json中属性值最大的选项
    var maxKey = "";
    var maxValue = 0;
    for (var k in json) {
        //        if(maxKey == ""){
        //            maxKey = k;
        //            maxValue = json[k];
        //        }else{
        if (json[k] > maxValue) {
            maxKey = k;
            maxValue = json[k];
        }
        //        }
    }
    console.log(maxKey);
    console.log(maxValue);


</script>

打印结果：

20180202_1540.png

内置对象 Math

内置对象 Math的常见方法：

Math.abs(); 取绝对值
Math.floor(); 向下取整（向小取）
Math.ceil(); 向上取整（向大取）
Math.round(); 四舍五入取整（正数四舍五入，负数五舍六入）
Math.random(); 随机数0-1

举例：

    var num = -0.6;

    console.log(Math.abs(num));        //取绝对值
    console.log(Math.floor(num));      //向下取整，向小取
    console.log(Math.ceil(num));       //向上取整，向大取
    console.log(Math.round(num));      //四舍五入取整（正数四舍五入，负数五舍六入）
    console.log(Math.random());        //随机数 0-1

20180202_1601.png

url 编码和解码

URI (Uniform ResourceIdentifiers,通用资源标识符)进行编码，以便发送给浏览器。有效的URI中不能包含某些字符，例如空格。而这URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字符，从而让浏览器能够接受和理解。

    encodeURIComponent();   //把字符串作为 URI 组件进行编码
    decodeURIComponent();   //把字符串作为 URI 组件进行解码

举例：

    var url = "http://www.cnblogs.com/smyhvae/";

    var str = encodeURIComponent(url);
    console.log(str);                           //打印url的编码
    console.log(decodeURIComponent(str));       //对url进行编码后，再解码，还原为url

打印结果：

20180202_1432.png

20 KiB Raw Blame History Unescape Escape

面向对象的概念

创建自定义对象

创建单个自定义对象

引入：创建多个自定义对象

new和this

属性绑定

对象字面量

json的介绍

类和对象

内置对象

内置对象：Date

Date对象的声明

Date对象的方法：获取日期和时间

返回距离1970/01/01毫秒数

举例：模拟日历

举例：发布会倒计时

内置对象String

简单数据类型、复杂数据类型

charAt/charCodeAt：1.2.1 给索引查字符

indexOf/lastIndexOf：给字符查索引

concat：字符串的链接

字符串的截取（重要）

一些特殊方法

大小写转换

html方法

字符串练习

内置对象 Math

url 编码和解码

20 KiB

Raw Blame History