当前位置：首页 > news >正文

JavaScprit之初识面向对象

news 来源：原创 2024/5/16 15:54:03

正则补充：

var str="abC123aBcd777AAA";
var reg1=/[a-z]{3}/i;
var reg2=/[a-z]{3}/ig;
//g 代表全局匹配，在特定的方法中有效//查找
//目标1：找到所有满足正则的子字符串在完整字符串中的位置
//目标2：找到满足正则的子字符串的具体内容
//高级要求：找到所有满足正则的子字符串的位置及内容//方法1：search
console.log(str.search(reg1));//0
console.log(str.search(reg2));//0
//只能返回第一个满足正则的子字符串的位置（下标）
//不能返回具体内容，也不能查找到全部
console.log("***********************************************");
//方法2：match
console.log(str.match(reg1));
//["abC",index:0,input:"abC123aBcd777AAA"]
//返回数组，其中，下标0对应的是查找到的第一个具体内容
//下标index是第一个子字符串的位置
console.log(str.match(reg2));//["abC", "aBc", "AAA"]
//返回素组，保存所有满足正则的子字符串的具体内容
//没有g修饰符时只可以返回第一个满足正的子字符串的内容及位置，没办法查找所有
//有g修饰符只能查找到内容，没办法查找出位置
console.log("***********************************************");
//方法3：exec
console.log(reg1.exec(str));
//作用同没有g修饰符的matchconsole.log(reg2.exec(str));
//返回第一个满足正则的字符串的信息
console.log(reg2.exec(str));
//返回第二个满足正则的字符串的信息
console.log(reg2.exec(str));
//返回第三个满足正则的字符串的信息
console.log(reg2.exec(str));
//后面没有满足正则的子字符串，则返回null
console.log(reg2.exec(str));
//null之后再次使用，则重新查找返回第一个满足正则的字符串的信息//需求：打印出所有满足正则的子字符串的内容及位置
//使用while循环
var res;
while(res=reg2.exec(str)){console.log(res);
}

面向对象

类：具有相同特性的一对对象组成的群体

对象：一个具体的人或物

类与对象的关系：类是对象的抽象、对象是类的实例

//对象
//声明以下对象
//1.对象：豌豆射手
var Peashooter = {name: "豌豆射手",game: "植物大战僵尸",hurt: "普通",cost: 100,burial:"快",introduce:" 一株植物如何才能在快速生长和射击豌豆方面如此突出？豌豆射手说：“勤奋工作、承担责任，以及一份健康的早餐：阳光与高纤维二氧化碳的合理搭配，这就是我的秘诀。”"
}//2.对象：坚果墙
var GourdWall = {name: "坚果墙",game: "植物大战僵尸",hurt: "普通",cost: 50,burial: "慢",introduce: "“人们问我，长时间地被僵尸啃来啃去是什么感觉。”墙果说，“他们不了解的是，由于触觉不发达，我能够感受到的只是轻微的刺痛——就像有人给你做背部按摩一样。”"
}//3.对象：火炬树桩
var Torchwood = {name: "火炬树桩",game: "植物大战僵尸",hurt: "普通",cost: 175,burial: "慢",introduce: " 火炬树桩受到众人的敬爱，只因他的诚实正直、牢不可破的友谊，以及增强豌豆伤害的能力。但火炬树桩也有个秘密：他不识字。"
}

以上多个对象，都具有相同的属性（相同特性）

每一次都声明出一个对象，很麻烦

所以可以使用类来简写

//从多个对象中提炼类：类是对象的抽象
function Plant(name, game, hurt, cost, burial, introduce){this.name = name;this.game = game;this.hurt = hurt;this.cost = cost;this.burial = burial;this.introduce = introduce;
}
var Sunflower=new Plant("向日葵","植物大战僵尸","普通",50,"慢","向日葵很难不随着拍子起舞——究竟是什么拍子呢？嗯，这是大地母亲那赐予生命的爵士节奏，它独有的音调只有向日葵才听得到。")
console.log(Peashooter.name)//豌豆射手
console.log(Sunflower.name)//向日葵
//两种声明方式得到的对象，在使用上没有区别
console.log(Peashooter)
console.log(Sunflower)

实际开发中，先有类再有对象

先要构思好，通过这个类实例化而来的对象，所有具备的特点

通过这些特点设置，类的属性

进而通过类，实例化出对象

function Zombie(name,hurt,health,speed){this.name = name;this.hurt = hurt;this.health = health;this.speed = speed;this.attack = function(){console.log(this.name + " attack");}
}
var ordinary_zombie = new Zombie("Ordinary_Zombie",10,100,10);
ordinary_zombie.attack();
//方法是属性的一种，属性值是函数
//需要实例化是提供具体值，则设置参数
//不需要的则在类例面直接赋值

看看下面的这些代码：

function Zombie(name,hurt,health,speed){this.name = name;this.hurt = hurt;this.health = health;this.speed = speed;this.attack = function(){console.log(this.name + " attack");}}var zombie=new Zombie("僵尸",10,100,10);var flag_zombie=new Zombie("旗帜僵尸",10,100,15);zombie.attack();flag_zombie.attack();//两个对象的attack方法，从方法名到担当体都是一样的//是不是同一个方法？console.log(zombie.attack==flag_zombie.attack);//false

两个一模一样的方法，不是同一个方法
后果：浪费内存
那么，如果我们想要让两个对象的attack方法是同一个方法，该怎么办？

在思考这个问题之前，先思考一下为什么是两个方法

new 到底做了什么？

首先，Zombie的本体是一个函数

直接调用会怎么样？

var zombie=Zombie("僵尸",10,100,10)
console.log(zombie);//undefined
console.log(zombie.name)//报错
zombie.attack();//报错

由于方法没有返回值，所以zombie是undefined

值不会凭空消失，会去哪里？

也就是说没有new时，方法中的this.name在哪？

答：在window对象中

function中的this

谁调用this就指向谁

var obj = {a:10,fn:function(){console.log(this.a);}
}
obj.fn();//10
//fn是funciton里面的this，谁调用就指向谁var a=200;
function fn(){var a=100;console.log(this. A);
}
fn();//200