学习js的课堂笔记(三)----面向对象的程序设计

创建对象
1.工厂模式
function createPerson(name,age,gendr){
var p={
name:name,
age:age,
gender:gender
}
return p;
}
var p1=createPerson(‘terry’,12,’male’);
var p2=createPerson(‘lerry’,13,’male’);

问题:本质还是手动创建;类型无法细分。

2.构造函数模式
自定义构造函数(自定义类型),通过new调用构造函数。
function Animal(name,age){
this.name;
this.age=age;
this.sayName=function(){
console.log(this.name);
}
}
var a1=new Animal(‘terry’,12);
var a2=new Animal(‘larry’,13);

a1.sayName();

//Animal {name:’terry’}
函数如果保存在对象中,会造成内存的浪费,因为公共的函数式可以放到一个公共的位置。
a1 instanceof Animal //true
a1.constructor //Animal
a1.sayName==a2.sayName //false

重难点:
3.构造函数模式+原型模式

将对象的私有特性存放到对象内存中,将对象可以共享属性保存到原型内存中。

function Animal(name,age){
this.name=name;
this.age=age;
}
Animal.prototype.sayName=function(){
console.log(this.name);
}

var a1=new Animal(‘terry’,12);
var a2=new Animal(‘larry’,13);

a1.sayName==a2.sayName


对象继承
1.伪继承(借用构造函数)
function Animal(name,age){
this.name=name;
this.age=name;
}
function Dog(name,age,gender){
Animal.apply(this,arguments); //借用构造函数
this.gender=gender;
}

2.原型链继承
Animal继承Object

子构造函数的原型指向父构造函数的实例

function Animal(){

}
Animal.prototype.sayName=function(){

}

function Person(){

}
Person.prototype.sayAge=function(){

}

Person.prototype=new Animal();
var p=new Person();
p.sayAge() (Person原型)
p.sayName() (Animal原型)
p.toString() (Object原型)

实例可以调用构造函数原型链中的方法
Object

Array

var arr=[];
arr可以调用Array.prototype.,也可以调用Object.prototype.

正则表达式
是一个描述字符模式的对象。
例:
var str = “百度地址为https://www.baidu.com,谷歌的地址为http://www.google.com,淘宝的地址为https://www.taobao.com,…”;

请你将所有的url地址给摘取出来

https://www.baidu.com
https://www.google.com
https://www.taobao.com

正则表达式为:/(https|http):\/\/(www)?.\w+/

var pattern = new RegExp()

/\w+/
"hello world"

1.正则表达式对象的创建
1)构造函数
var pattern = new RegExp(“正则表达式”,”修饰符”);
例:var pattern=new RegExp(“abc”,”ig”);
2)正则表达式字面量
var pattern = /正则表达式/修饰符;
例:var pattern = /abc/ig;

2.修饰符
i ignore case 不区分大小写
g global 全局
m multiline 多行

3.原型属性
RegExop.prototype.global
RegExop.prototype.ignoreCase
RegExop.prototype.multiline
RegExop.prototype.lastIndex 全局模式下记录下一次开始位置
RegExop.prototype.source

4.原型方法
RegExp.prototype.exec() //执行,用于获取匹配的值
RegExp.prototype.test() //用于测试是否匹配模式
RegExp.prototype.toString() //转换为字符串

1) var result = pattern.exec();
执行正则。从参数获取目的字符串
参数:字符串
返回值:类数组对象
数组:查询到的结果
index:查询到结果的索引
input:操作的字符串

例:var arr="I like eat watermelon";
    var pattern=/a/ig;
    pattern.exec(arr);
   返回值: 
       [ 'a', index: 8, input: 'I like eat watermelon' ]

案例:
    给定字符串"hello world, this is a good day";请遍历拿到所有的单词,忽略大小写。

    var str = "hello world, this is a good day";
    var pattern = /\w+/gi

    while(pattern.exec(str)){
        var result = pattern.exec(str);
    }    

2) var result = pattern test();
参数:字符串
返回值:布尔类型(true/false)

 * 如果正则表达式中有修饰符"g",此时,在pattern中会维护lastIndex属性,记录下一次开始的位置,当第二次执行exec时,从lastIndex开始检索。
 * 如果正则表达式中没有修饰符"g",不会维护lastIdex属性,每次执行从开始位置检索。

5.字符类
1) [直接量]
2) . (点号,小数点)匹配任意单个字符,但是行结束符除外
3)\d 匹配任意阿拉伯数字。等价于[0-9]。
4)\w 匹配任意来自基本拉丁字母表中的字母数字字符,还包括下划线。等价于[A-Z,a-z,0-9,_]。
5)\s 匹配一个空白符,包括空格、制表符、幻夜符、换行符和其他 Unicode 空格。

6.字符集合
[xyz] 一个字符集合,也叫字符组。匹配集合中的任意一个字符。可以使用连字符’-‘指定一个范围。
[^xyz] 一个反义或补充字符集,也叫反义字符组。也就是说,它匹配任意不在括号内的字符。也可以通过使用连字符 ‘-’ 指定一个范围内的字符。

7.边界
^ 匹配输入开始。如果多行(multiline)标志被设为true,该字符也会匹配一个断行(line break)符后的开始处。
$ 匹配输入结尾。如果多行标志被设为true,该字符也会匹配一个断行符后的结尾处。
\b 匹配一个零宽单词边界(zero-width word boundary),如一个字母与一个空格之间。

 \B  匹配一个零宽非单词边界(zero-width non-word boundary),如两个字母之间或两个空格之间。

8.分组
(x) 匹配x并且铺货匹配项。这被称为捕获括号(capturing parentheses)。
\n n是一个整数。一个反向引用(back reference),指向正则表达式中第n个括号(从左边开始数)中匹配的子字符串。
例如:/\w+:\/\/w+\1\w+/

9.数量词
x* 匹配前面的模式x 0次或多次。
x+ 匹配前面的模式x 1次或多次。等价于 {1,}。
x*? 像上面的 * 一样匹配前面的模式 x,然而匹配是最小可能匹配。
x+? 像上面的 + 一样匹配前面的模式 x,然而匹配是最小可能匹配。
x? 匹配前面的模式x 0次或1次。

 x|y    匹配 x 或 y
 x{n}   n 是一个正整数。前面的模式x 连续出现n次时匹配。
 x{n,}  n 是一个正整数。前面的模式x 连续出现至少n次时匹配。
 x{n,m} n 和 m 为正整数。前面的模式x 连续出现至少n次,至多m次时匹配。

10.Javascript中String对正则表达式的支持

 1)search() 
    参数为一个正则表达式。如果参数不为正则表达式,则先通过RegExp将其转换为构造函数。不支持全局检索,返回第一个与之匹配的子串的位置,如果找不到匹配的子串,返回-1。类似于正则表达式的 test 方法

 2)match() 
    最常用的正则表达式方法,参数为正则表达式。返回由匹配结果组成的数组。当正则表达式中没有g修饰符的时候,就不是全局匹配。这时,数组的第一个元素就为匹配的字符串,剩余的元素则是由正则表达式中用圆括号括起来的子表达式。如果该正则表达式设置为修饰符g,则该方法返回的数组包含字符串中所有匹配结果。类似于正则表达式的 exec 方法

  3)replace()    ---不改变原值
    用以执行检索和替换操作。第一个参数是正则表达式,第二个参数是要替换的字符串。

    text.replace(/javascript/gi,“JavaScript”);  //不区分大小写将所有javascript转换为JavaScript

  4)split() 
   参数可以为正则表达式
   "1, 2, 3, 4, 5".split(/\s*,\s*/);    //["1","2","3","4","5"] 允许分隔符左右两边留有空白

内置构造函数、对象

字符串  String
构造函数:
    search()
    match()
    split()
    replace()
    indexOf()
    charAt()
    substr(begin[,len])
    substring(begin[,end])
    toLowerCase()
    toUpperCase()
    ...
Math 对象
    Math.random()
    Math.round()
    Math.ceil()
    Math.floor()
    Math.abs()
    Math.max()
    Math.min()
    ...
Date 构造函数
    var now = new Date();
    now 可以调用Dat3.prototype.*(了解)
    moment.js


11.Javascript中RegExp
   构造函数
           第一个参数包括正则表达式的主体部分,即正则表达式直接量中两条斜线之间的文本
           第二个参数指定正则表达式的修饰符。只能传入g ,i,m或者其组合,可以省略
         var zipcode = new RegExp("\\d{5}","g");
   属性
        source  包含正则表达式文本
        global  布尔值,表明这个正则表达式是否带有修饰符g
        ignoreCase  布尔值,表明这个正则表达式是否带有修饰符i
        multiline   布尔值,表明这个正则表达式是否带有修饰符m
        lastIndex   如果匹配模式带有g,这个属性存储在整个字符串中下一次检索的开始位置,这个属性会被exec(), test()方法调用到

第三方库
font-awesome.css
icon-font.css
animate.css

js库
moment.js
lodash.js
jquery.js

猜你喜欢

转载自blog.csdn.net/qq_37957971/article/details/82316878