一、定义类:经典做法——使用的是funciton,在es6之前因为在js中没有定义类的class语句,只有function.
■ 举例:
//定义一个Person类(通过类的无参构造函数定义类) function Person(){} var p = new Person(); p.name = '小明'; p.age = 12;
■ 在es6定义类的语法糖class跟java很像:
class Person{ constructor(name,age){ this.name=name; this.age=age; } play(){ console.log("game"); } }
二、类的种类(系统类、自定义类)
(1)常见的系统类 String、Date、Math
1)String 类,字面量 '' 举例: var str = 'abc';
✿ 补充: '' 字符串 [] 数组 {} 对象 // 正则表达式
① length
② indexOf(string) 取得参数在字符串中出现的位置
③ substr(num1, num2) 截取字符串
④ toLowerCase()
⑤ toUpperCase()
⑥ replace(str1, str2) 字符串替换
2)Date 日期类
① getYear() getFullYear() getMonth() getDay()
② getDate()
③ getHours() getMinutes() getSeconds() getMilliseconds()
3) Math 数学类
① ceil(数值) floor(数值)
② min(数值1, 数值2) max(数值1, 数值2)
③ pow(数值1, 数值2)
④ random() 随机数
⑤ round(数值) 四舍五入
⑥ sqrt(数值) 开平方根
❀(2)自定义类【在es6之前,js中没有定义类的语句class,是通过类的构造函数定义类的】:
□ 在es6定义类的语法糖class跟java很像
❀ 1)语法:
function 类名() { //在js中没有定义类的语句class,是通过类的无参构造函数定义类 } var 对象变量 = new 类名();
❀ 2)关于对象属性的使用:
对象.属性 对象['属性']
❀ 3)对象的属性是动态添加的,对象属性可以使用 . 或者 [''] 形式表示出来(对象的属性可以是任意数据类型)
//定义一个Person类(Person类的无参构造函数) function Person(){} var p = new Person(); p.name = '小明'; p['age'] = 12;
❀ 4)定义类通过类的有参构造函数:
■ 举例:
//定义一个Person类(Person类的有参构造函数) function Person(name, age, hobby){ this.name = name; this.age = age; this.hobby = hobby; } var p = new Person('小明', 12, '游戏');
❀ 定义类(构造函数)的细节:
定义类(构造函数)时,内部的方法需要以匿名函数
(将方法赋值给类的属性)的方式定义,才能暴露给外界
■ 举例:定义类 内部的方法不是以匿名函数的方式(fn方法):
<input type="button" name="name" value='点一下' id="btn"/> window.onload = function () { function Person() {//构造函数(函数) function fn() { console.log(this); } } document.getElementById('btn').onclick = function () { var p = new Person(); p.fn(); } }
■ 举例:定义类 内部的方法以匿名函数的方式(将方法赋值给属性)(this.fn属性):
function Person() {//构造函数(函数) this.fn = function() { console.log('成功打印:' + this); } } var p = new Person(); p.fn();
5)for…in 遍历对象的属性:
■ 举例:
//定义一个Person类(Person类的有参构造函数) function Person(name, age, hobby){ this.name = name; this.age = age; this.hobby = hobby; } var p = new Person('小明', 12, '游戏'); for(var i in p){ document.write(i + ':' + p[i] + '<br/>'); }
6)关键字 constructor、typeof、instanceof、delete
- constructor: 对象.constructor 返回对象的构造器
- typeof: typeof 对象 返回对象的数据类型
- instanceof: 对象 instanceof 类 判断对象是否是某个类的实例
- delete: delete 对象.属性 删除对象的属性
三、prototype 原型(返回对象类型(类)原型的引用)
1、格式:class.prototype //获取类原型的引用
■ 举例:
//定义一个Person类 function Person(name, age) { this.name = name; this.age = age; } //获取类的原型Person.prototype, 并且给类添加属性nationlity Person.prototype.nationality = "English"; //获取类的原型Person.prototype, 并且给类添加方法属性say Person.prototype.say = function () { console.log('say hello'); }; //创建Person类的实例 var p = new Person("John", 50); console.log(p.nationality); p.say();
✿ 2、区分实例属性和静态属性:
**例如:定义了一个Person类,区分Person.prototype. nationality 和 Person. nationality **:
■ Person.prototype. nationality: 是指为Person类下的实例添加属性
nationality
■ Person. nationality:是指为Person类添加静态属性
nationality
3、prototype 原理:
□ js在加载每个构造器时,会创建对应的原型对象
;
□ 在构造器对象内部有一个prototype属性
用来指向原型对象;
□ 在原型对象内部是有一个constructor属性
用来指向构造器;
□ 一般实例化对象后,对象的属性是先在构造器中查找,找不到就到原型对象中找
4、为什么说Object是所有类的父类:
当系统为某个类构造器创建原型对象时,类名.prototype = new Object()
//即类的原型是Object的一个实例,原型对象拥有Object的所有属性,
所以说Object是所有类的父类
四、原型链(类的原型就是Object的一个实例对象, 而Object构造器又有其自身的Object原型对象 )
五、json 对象
1、语法:{属性名:属性值,属性名:属性值,属性名:属性值……}
✿ 键值对的集合,即json对象
2、定义对象的属性语法:
//定义一个json对象 var p1 = {name:'小明', age:12, sex:'女'}; //对象的属性可以不加单引号,不叫双引号 var p2 = {'name':'小明', 'age':12, 'sex':'女'};//对象的属性可以加单引号 var p3 = {"name":'小明', "age":12, "sex":'女'};//对象的属性可以加双引号
□ json对象是Object类下的一个对象
3、创建对象有两种方式(使用构造器的方式和使用json { } 的方式),有什么区别?
■ json 创建对象省略了构造器的定义(程序只需要定义一个对象时)
■ 构造器可以简化属性的定义(程序需要定义多个相同的属性或方法的对象)