编程思想:
1.面向过程编程(OPP/POP) Oriented Procedure Programming:以事件为中心
2.面向对象编程(OOP)Object Oriented Programming :以事物为中心
(2)通过类(class),去创建对应的对象(object)
类:类是具有相同特征和行为的事物的抽象,类似于模板
对象:对象是类的实例,是由类创造出来的
JS里是没有类的,但是有一个功能与类相似的东西---函数
这个函数有一个专门的名字---构造函数
构造函数看起来有两个最大的特点:
1.名字首字母大写
2.调用的时候需要new关键字配合
JS创建对象的两种方式:
1.字面量(语法糖)创建对象
语法:var obj = {
属性名1:属性值1,
属性名2:属性值2,
如何操作一个函数:
点语法:既可设置,也可以获取对象的属性
对象.属性名
例子:创建一个学生对象,属性包括:姓名,年龄,性别,学校,专业;方法包括:上课,考试,做作业,函数里只需要输出一行log即可
var stuObj = {
//属性
name = '张三',
age = '18',
sex = '女',
school = '郑州大学',
专业:'计算机科学与技术',
friend:{
name:'李四',
age:'25',
sex:'男',
hobby:['爬山','蹦极'],
},
//方法
shangke:function(){console.log("上课"); },
kaoshi:function(){console.log("考试");},
homework:function(){console.log("做作业");},
intruduce:function(){
//在对象方法里的this,代指的就是方法所属的对象
console.log(`你好,我叫${this.name},年龄是${this.age},学校为${this.school}`);
}
};
console.log(stuObj);
stuObj.intruduce();//此时的this代表的是stuObj
console.log(stuObj.shangke());//上课 undefine
//打印的是‘stuObj.shangke()’的返回值,而这个方法没有返回值,所以他会先打印‘上课’,然后再打印undefine
var abc = stuObj.introduce;//此时abc为introduce的函数体
abc();//window.abc();此时的this指向的是window
//工厂模式创建对象 设计模式
function creatStu(name,stu,sex){
var stu = {
name:name,
age:age,
sex:sex,
sayHi:function(){
console.log(`你好,我叫${this.name},年龄${this.age},性别是${this.sex}.`);
}
}
return stu;
}
var stu1 = creatStu("张三",20,"男");
var stu2 = creatStu("李四",25,"女");
var stu3 = creatStu("王五",27,"男");
stu1.sayHi();//你好,我叫张三,我今年20,性别是男
stu1.sayHi();//你好,我叫李四,我今年23,性别是女
stu1.sayHi();//你好,我叫王五,我今年20,性别是人妖
2.构造函数创建对象
function Student(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
var stu1 = new Student("张三",20,"男");
console.log(stu1);
JS面向对象里的重要概念
function Person(name,age,sex,nation,sayHi){
this.name = name;
this.age = age;
this.sex = sex;
}
1.原型对象(prototype) ***
(1)原型对象是一个对象,它属于构造函数,JS会为每一个构造函数内置一个原型对象,可以通过语法:
函数名.prototype
(2)因为原型对象是对象,所以可以分为为其新增属性或者方法,給原型对象新增的属性或者方法,能被所属的构造函数创建的任何一个实例对象所共同拥有
//为上面构造函数新增nation属性和sayHi方法
Person.prototype.nation = "中国";
Person.prototype.sayHi = function(){
console.log(`你好,我叫${this.name},年龄为${this.age},性别为${this.sex}.`);
}
var p1 = new Person("张三",20,"男");
console.log(p1);//打印的是一个对象
console.log(p1.nation);//中国
p1.sayHi();//你好,我叫张三,今年20.
2.constructor属性 *
constructor属性属于原型对象,任何一个原型对象都有一个constructor属性,该属性指向原型对象所属的构造函数
console.log(Person.prototype.constructor);
//由上图可知:打印的为Person这个构造函数
3. _ proto _ 属性 **
_ proto _ 属性,该属性属于实例对象,指向实例对象所属的构造函数的原型对象
console.log(p1._proto_);//打印的是nation属性和sayHi方法
4.原型链 ***
JS查找对象属性的顺序:
1.首先在当前实例对象里查找是否对应存在对应属性,如果有,直接获取返回即可
2.如果实例对象里没有该属性,系统不会停止查找,会接着去当前实例实力对象所属的构造函数的原型对象里继续寻找是否存在该属性,如果有,获取返回
3.如果当前构造函数所属的原型对象里也没有该属性,系统还不会停止查找,回去当前实例对象的构造函数的原型对象所属的构造函数的原型对象里继续查找
4.直到找到Object构造函数的原型对象停止查找如果此时还没有找到该属性,属性返回undefined,方法调用也会报错
这种查找对象属性或者方法形成的顺序,我们称之为"原型链"!!!
原型链的应用 :继承 **
© 著作权归作者所有
举报
发表评论
0/200