第六章.面向对象
一、创建面向对象的方法
第一种方式:通过new创建对象
语法格式:
//let 对象名=new Object();
//案列1:
//通过new来创建一个空对象,object所有类的最大类
let desk=new Object();
//添加属性是静态特征------使用方法:对象名.属性名=值 进行操作
// (1)我们是用等号赋值的方法 添加对象的属性和方法
// (2)每个属性和方法之间用 分号结束
desk.size='167*50*43';//尺寸
desk.color='白色';//颜色
desk.price=300;//价格
desk.material='木质';//材质
//动态属性------行为/方法
desk.use=function(){
console.log("桌子可以摆放物品");
}
//打印桌子的属性值
console.log(`我买了一张桌子:
尺寸:${desk.size};
颜色:${desk.color};
价格:${desk.price};
材质:${desk.material};
`);
//调用桌子的方法----对象名.方法名()
desk.use();
//案列2:
//用new创建一个空对象
let desk=new Object();
//添加属性--对象名.属性名=值 进行操作
desk.size='120*34*56';//尺寸
desk.color='白色';//颜色
desk.price=75;//价格
desk.material='铁质';//材质
//创建对象里面的方法---对象名.方法名
desk.Myfunction=function(){
console.log("功能:"+"可以摆放东西");
}
//打印桌子的属性值-----对象名.属性名
console.log('尺寸:'+desk.size);
console.log('颜色:'+desk.color);
console.log('材质:'+desk.material);
// 调用对象里面的方法-----对象名.方法名()
desk.Myfunction();
//案列3:
//创建一个对象空
let obj=new Object();
//添加属性值----对象名.属性名
obj.name="张三";
obj.age=16;
obj.sex="男";
//在对象里面创建方法---对象名.方法名()
obj.SayHi=function(){
console.log('你好');
}
//打印属性值---对象名.属性名
//方法一打印
console.log(obj.name);
console.log(obj.age);
//方法二打印
console.log(obj['sex']);
//调用对象里面的方法---对象名.方法名()
obj.SayHi();
//第二种方式:使用字面量创建对象 {}表示对象 []表示数组 -----json写法
//语法:let obj={};//创建一个空的对象
注意点:
//1.里面的属性或者方法我们采取键值对的形式 键 属性名:值 属性值
//2.多个属性和方法之间用逗号隔开
//3.方法后面跟的是一个匿名函数
//二、使用对象
//1.调用对象的属性 我们采取--对象名.属性名
//2.调用属性还有一种方法--对象名['属性名'];
//3.调用对象名的方法--对象名.方法名()
//案列1:
let obj={
//属性
name:'张三',
age:16,
sex:'男',
//在对象里面添加方法
SayHi:function(){
console.log('你好');
}
// 1.调用对象的属性 我们采用 对象名.属性名
console.log(obj.uname);
// 2.调用属性还有一种方法 对象名['属性名'];
console.log(obj['age']);
// 3.调用对象的方法sayHi 对象名.方法名()别忘记添加小括号
obj.sayHi();
//案列2:
let desk={
//属性 静态特征---属性名:属性 后面跟逗号
'size':'156*45*54',//尺寸
'color':'白色',//颜色
'price':77,//价格
'material':'铁质',//材质
//对象里面的方法----对象名:方法名()
'use':function(){
console.log('我买了一张卓子');
}
}
//打印桌子的属性值----${对象名.属性名}
console.log(`我买的桌子:
尺寸:${desk.size};
颜色:${desk.color};
价格:${desk.price};
材质:${desk.material}
`);
//调用对象里面的方法----对象名.属性名
desk.use();
// 案列3:
let obj = {
// 静态属性 属性名:值 后面跟逗号
size: '170*40*50',
color: '白色',
caiZhi: '木质',
// 对象里面的方法
use: function () {
console.log('功能:' + '可以摆放东西');
}
}
// 调用对象里面的属性 对象名.属性名
console.log('尺寸:' + obj.size);
console.log('颜色:' + obj.color);
console.log('材质:' + obj.caiZhi);
// 调用对象里面的方法 对象名.方法名
obj.use();
//第三种方法:使用构造函数创建函数
//注意点:
// 1.因为我们一次创建一个对象,里面很多的属性和方法是大量相同的我们只能复制
// 2.因此我们可以利用函数的方法重复这些相同的代码我们就把这个函数称为构造函数
// 3.又因为这个函数不一样,里面封装的不是普通代码,而是对象
// 4.构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
//语法结构:
function 构造函数名(){
this.属性=值;
this.方法=function(){
}
}
调用构造函数要用new来调用
new 构造函数名();
// 案列1:
function Star(name,age,sex){//形参
// 属性--this.属性名来使用
this.name=name;
this.age=age;
this.sex=sex;
//在构造函数里面创建方法--this.方法名
this.Sing=function(sang){//形参
console.log(sang);
}
}
//使用new调用构造函数
let zet=new Star('张学友',40,'男');//实参
//打印属性值
console.log(zet.name);//名字
console.log(zet.age);//年龄
console.log(zet.sex);//性别
// 调用构造函数里面的方法 实例化.方法名
zet.Sing('李香兰');//实参
//总结:
// 1.构造函数不需要return 就可以返回结果
// 2.我们只要new Star()调用函数就创建了一个函数
// 3.我们的属性和方法必须添加加 this
//案列2:
function Dog(name, color, age, type) {
//构造万法里面的this还是全局变量window吗?
console.log(this);
// 构造方法里面如何赋值
// 不加this的变量是局部变量,形参变量
// 加this的是小狗对象的属性名称
this.name = name;
this.color = color;
this.age = age;
this.type = type;
// 在构造方法里面添加对象的方法
this.sayHi = function () {
// 用es6格式输出
console.log(`大家好,这是我家狗狗:
狗狗的名字:${this.name}
狗狗的颜色:${this.color}
狗狗的年龄:${this.age}
`)
}
}
//new Dog()
//直接调用Dog()和
// new Dog()区别:直接调用Dog()和普通方法- -样,没有构造方法的特性
//new Dog()执行this就是当前Dog实例对象
// 不直接掉 要用new调用
Dog("小白", "白色", 3, "泰迦");
// 表示隔开
console.log('----------------')
// 调用构造函数用new
let dog1 = new Dog("小白", "白色", 3, "泰迦");
let dog2 = new Dog("旺财", "灰色", 3, "金毛");
// 调用构造函数里面的方法
dog1.sayHi();
dog2.sayHi();
//案列3:
// 法师类的属性 形参
function faShi(name, hp, mp, ap, skill) {
// 法师类的属性 -=血量,蓝条,法强,技能
this.name = name;
this.hp = hp;
this.mp = mp;
this.ap = ap;
this.skill = skill;
// 法师类的方法————普工,技能
this.a = function () {
console.log(this.name +'发起了普通攻击');
}
// 法师类的方法————普工,技能输出
this.skillA = function () {
console.log(this.name + '发了一次' + this.skill + '.....');
}
}
// 创建各种法师对象 实参传递给形参
let anQiLa = new faShi('王昭君', '4444', '44444', '44444', '无敌法强');
let faShi2 = new faShi('妲己', '血量', '法强');
// 输出各个法师对象
anQiLa.a();
anQiLa.skillA();
四、使用简单工厂创建多个对象
//创建多个狗狗的实例
//1.通过简单工厂 进行量化生产
//案列1:
function DogFactory(name, color, age) {//形参的变量,局部变量,作用范围仅限方法内
let dog = new Object();
dog.name = name;
dog.color = color;
dog.age = age;
dog.playDisc = function () {
console.log(dog.name + '每次回家狗狗都摇尾巴');
}
//返回生产的对象
return dog;
}
//2.通过调用工厂方法可以获得一个小狗的实例
// 调用方法的时候传递实参给形参
let dog1 = DogFactory('小白', '白色', 3);
let dog2 = DogFactory('小黑', '黑色', 2);
let dog3 = DogFactory('小黄', '黄色', 1);
//3.使用创建出来的小狗对象名.方法名调用狗狗接飞盘的方法
dog1.playDisc();
dog2.playDisc();
dog3.playDisc();
// 创建简单工具
console.log('---------------------');
function person(name, age, job) {
let obj = new Object();
obj.name = name;
obj.age = age;
obj.job = job;
obj.address = function () {
console.log(obj.name + obj.age + obj.job + '中国北京海淀区')
}
// 返回生产对象
return obj;
}
//创建变量 并去调用对象
let obj = person('小莉', 19, '销售');
let obj1 = person('小莉', 20, '销售');
let obj2 = person('小莉', 21, '销售');
let obj3 = person('小莉', 18, '销售');
//调用方法 属性名.方法名
obj.address();
obj1.address();
obj2.address();
obj3.address();
console.log('...........................');
//使用简单工厂简历多个对象
function salHi(name, age, sex) {
let obj = new Object();
// 对象属性 使用:对象名.属性名
obj.name = name;
obj.age = age;
obj.sex = sex;
// 对象里面的方法 使用:对象名.方法名
obj.sing = function () {
console.log('姓名:' + obj.name + '、' + '年龄:' + obj.age + '、' + '性别:' + obj.sex + '、' + '描述:' + '是有故事的人');
}
// 返回生产对象
return obj;
}
// 调用函数对象 属性名.对象名
let ong1 = salHi('张辉', 19, '男');
let ong2 = salHi('李辉', 19, '男');
let ong3 = salHi('张辉', 19, '男');
let ong4 = salHi('李辉', 19, '男');
let ong5 = salHi('张辉', 19, '男');
// 调用对象里面的方法 属性名.方法名
ong1.sing();
ong2.sing();
ong3.sing();
ong4.sing();
ong5.sing();
//案列1:
//编写数组的原型中的去重方法 prototype原型的意思
Array.prototype.quchong = function () {
// 定义一个空数组
let empty = [];
// 让空数组存放在原始数组中不重复的数据
console.log(this);
console.log(this.length);
for (let i = 0; i < this.length; i++) {
// 判断空数组里面是否存在当前数组this的数据
if (empty.indexOf(this[i]) == -1) {
//传递到空数组中
empty.push(this[i]);
}
}
// 返回存好的数据空数组
return empty;
}
// 原始数组
let nums =[4, 5, 55, 67, 87, 5, 4, 12];
let nums2 = nums.quchong();
console.log(nums2);
五、用es6方式创建类模板
//声明小狗类
let Dog = class Dog {
// 属性 静态特征
name;
age;
type;
color = "黄色";
// 添加静态属性
static legs=4;//四条腿
//构造方法:初始化数据
constructor(name, age, type) {
this.name = name;
this.age = age;
this.type = type;
}
// 方法 动态行为
playDisc() {
console.log(this.name + '狗狗会守护家...');
}
eat() {
console.log(this.name + "狗狗喜欢吃骨头...");
}
intro() {
console.log(`自我介绍:${this.name}狗狗,今年${this.age}岁,是一只${this.type}犬,颜色是:${this.color}`);
// 类模板里面调用方法需要添加this关键字
this.eat();
this.playDisc();
// 静态的属性需要用类名.属性名调用,静态属性资源不属于实例私有,共享资源
console.log("狗狗腿的个数:"+Dog.legs);
Dog.legs=3;
}
// 静态方法
static sleep() {
console.log(this.name+"狗狗正在酣睡");
}
}
//创建小狗实例new Dog()的时候,默认会执行constructor(name, age, type )构造方法
let d1 = new Dog("旺财", "3", "田园");
d1.intro();
Dog.sleep();
// d1.eat();
// d1.playDisc()
let d2=new Dog("小黑", "2", "田园")
d2.intro();
//总结:静态属性和静态方法不属于某个实例,调用的时候类名.属性名二 类名.方法|
//六、se6的继承
//案列:
//创建父类 :Person
class Person {
//属性
head;
legs;
//构造方法
constructor(head, legs) {
this.head = head;
this.legs = legs;
}
//介绍
info() {
console.log(`人有${this.head}个头,${this.legs}条腿`);
}
eat() {
console.log('人每天都要吃饭');
}
sellep() {
console.log('人每天都要睡觉');
}
}
//子类:student
class Student extends Person {
//属性
stuNo;
stuName;
stuScore;
//构造方法 也称构造器
constructor(stuNo, stuName, stuScore) {
// 调用父类的构造方法super关键字
//注意:必须要放在构造方法里面,且必须是第- -句
super(1, 2);
this.stuNo = stuNo
this.stuScore = stuScore;
this.stuName = stuName;
}
//学生自我介绍
inStro() {
console.log(`我叫${this.stuName},学号${this.stuNo},成绩${this.stuScore}`);
console.log(`人有${this.head}个头,${this.legs}条腿`);
// this.info();
}
//孩子类重新写- -个吃的方法
eat() {
console.log('人每天都要点外卖....');
}
}
//创建学生实例 张三
let zhangSan = new Student("s1244", "张三", "99");
zhangSan.inStro();
// 人有几条腿
//子类可以使用父类的方法
zhangSan.eat();
zhangSan.sellep();
//继承:单根继承,每个类只能继承一个类 继承具有传递性
浙公网安备 33010602011771号