面向对象编程
对象
1.对象可以让代码结构更清晰
2.对象复杂数据类型object.
3.本质:对象就是一组无序的相关属性和方法的集合。
4.构造函数泛指某一大类 ,比如苹果,不管是红色苹果还是绿色苹果,都统称为苹果。
5.对象实例特指-个事物,比如这个苹果等
6.for..in语句用于对对象的属性进行循环操作。
定义
在js中,对象是一组无序数据集合(包含属性和相关方法)
属性: 事物的特征 (一般名词)
方法: 事务的行为 (一般动词)
创建对象
对象的属性名是字符串,写的时候一般是省略了"",自动会转为字符串。
1.利用new Object创建对象
(1)我们是利用等号=赋值的方法添加对象的属性和方法
(2)每个属性和方法之间用分号结束
var obj = new Object();
obj.name = "lisi";
obj.sex = "nv";
obj.song = function(){
alert("唱歌")
}
2.利用字面量创建对象{}
(1)里面的属性或者方法我们采取键值对的形式 键 属性名: 值 属性值
(2)多个属性或者方法中间用逗号隔开的
(3)方法冒号后面跟的是一个匿名函数
var obj1 = {
name:"zhangsan",
sex:"男",
age:18,
sayHi:function(){
alert(this.age) //类的方法里 可以操作自身的属性 this
}
}
构造函数
1.构造函数名字首字母要大写
2.构造函数不需要return就可以返回结果
3.调用构造函数必须使用 new
4.我们只要new star()调用函数就创建一个对象ldh {}
构造函数的语法格式
function 构造函数名() {
this.属性 = 值;
this.方法 = function (){}
}
//构造函数 一大类 在其他语言里类似 class的思想
function Student(sname,age){ //首字母要大写
this.name = sname;
this.age = age;
this.xx = "123456";
this.eat = function(food){
console.log(food)
}
}
使用
new 构造函数名();
//new 实例化 (对象的实例化)
var zhangsan = new Student("zhangsan","11")
zhangsan.eat("馄饨")
console.log(zhangsan)
new关键字执行过程
1. new构造函数可以在内存中创建了一个空的对象
2. this就会指向刚才创建的空对象
3.执行构造函数里面的代码给这个空对象添加属性和方法
4.返回这个对象
使用对象
1.调用对象的属性
(1)对象名.属性名
(2)对象名["属性名"] 用[]属性名需要添加""变为字符串,如: ["name"]
console.log(obj1.name);
console.log(obj1.sex);
console.log(obj["sex"]);
2.调用对象的方法
对象名.方法名()
对象方法和函数的区别
--函数单独声明 函数名()
--方法 在对象内 调用时候 对象.方法()
obj1.sayHi();
3.删除属性
// delete obj.age
// delete obj["age"]
// delete obj.sayH
4.查看对象是否存在某个属性
有则返回true,没有返回false
console.log("age" in obj); //true
console.log("name" in obj); //false
5.with操作对象
里面是代码块 作用是操作同一个对象的多个属性,提供一些书写方便。
只能修改属性值, 不能添加
with (obj) {
age = 30;
uname = "lili"; //无效
console.log(123);
}
遍历对象
1.for (变量 in 对象) {}
var obj = {
name:"zhangsan",
age:11,
sex:"nan"
}
//for in循环遍历对象 (k key代表键值的含义)
for(var k in obj){
console.log(k) //k变量输出 得到的是属性名
console.log(obj[k]); //obj[k]得到的是 属性值 不能使用obj.k 结果为undefined
}
2.Object 是 js 内置的对象 里面封装了操作js对象的属性和方法。
var keys = Object.keys(obj); //遍历对象的所有属性名,提取出来放到数组里
console.log(keys);
// 推荐遍历对象用这种方式,性能比for in 遍历更高。
Object.keys(obj).forEach(function (item) {
console.log(item + ":" + obj[item]);
})
面向对象编程
js具有很强的面向对象的编程能力,也是一门面向对象的编程语言。
面向对象编程(OOP): 现在比较主流的编程范式。它将真实世界中的各种复杂关系,抽象为一个个对象,用对象之间的分工与合作,完成对真实世界的模拟。
在代码中用对象去描述现实生活中的事物,更好理解。
----类: 是一个抽象概念,是一类相似特征的集合。比如人类,就是所有人的集合。
----实例化: 由类产生对象的过程,就叫实例化。
----对象: 是一个实体,一个可以直接使用,可以看见的实体。由类产生的实体就叫对象,对象就有类的所有属性和方法。对象就是一类属性和方法的集合。
构造函数
是一个特殊的函数,用来模拟类,是产生对象的模板。
函数内部使用了this关键词,this代表的是要产生对象的实体。
必须要使用new关键词实例化。new关键词会创建一个{},this指向的就是这个{}
new.target
如果当前函数是new命令调用,new.target指向的是当前函数,否则是undefined
function ClassAniaml() {
console.log(this); // 非严格模式下,函数的this指向的是window全局对象。
console.log(new.target);
}
ClassAniaml(); // window对象 undefined
new ClassAniaml(); // ClassAniaml{}对象 函数本身
instanceof
返回一个bool值,表示对象是否为某个构造函数的实例。
var son1 = new Son();
console.log(son1 instanceof Fater); //false
console.log(son1 instanceof Son); //true
Object方法
Object.create()
Object.create( proto(原型, [propertiesObject](对象属性,可省略))
可以把一个对象作为原型,生成新的实例对象。
var cat = {
name: "cat",
age: 10
}
cat1 = Object.create(cat, { go: { value: "go1" } });
// 以cat为原型,创建一个新的对象,给创建的对象添加了go属性,属性值是go1.
console.log(cat1);
/*
{ go: "go1"
[[Prototype]]: Object
age: 10
name: "cat"
[[Prototype]]: Object
} */
Object.getPrototypeOf(obj)
返回参数对象的原型,是获取原型对象的标准方法
console.log(Object.getPrototypeOf(son1)); //{move: ƒ, constructor: ƒ}
Object.setPrototypeOf(obja,objb)
设置参数对象的原型。 把a的原型设置为b
var a = { name: "a" };
var b = { age: 123 };
Object.setPrototypeOf(a, b); // 把a的原型设置为b
console.log(a);
/* {
name: "a"
[[Prototype]]: Object
age: 123
[[Prototype]]: Object
} */
isPrototypeOf(obj)
用于判断一个对象是否为参数对象的原型.
var a = { name: "a" };
var c = Object.create(a);
console.log(a.isPrototypeOf(c)); // true 判断a对象是否为c对象的原型
__proto__
返回对象的原型
console.log(c.__proto__); //{name: 'a'}
hasOwnProperty()
用于判断属性是在对象自身(true)还是原型
console.log(a.hasOwnProperty("name")); //true
对象的继承
面向对象编程很重要的一个特征就是有继承概念。
A对象继承B对象,A对象就有了B对象的所有属性和方法。
大部分面向对象编程语言都是通过类实现继承,js没有类的体现,只能通过改变this指向的方式实现继承。
function M() {
this.family = "aa";
}
function Animals(name, age) {
this.name = name;
this.age = age;
this.mouse = function () {
console.log("mouse");
}
}
function Cat() {
M.call(this); // 可以多重继承
Animals.call(this, "cat1", 10); //通过改变Animals的this指向Cat,实现继承。
this.color = "red"
this.move = function () {
console.log("move");
}
}
var cat1 = new Cat();
console.log(cat1);
//Cat {family :'aa',name: 'cat1', age: 10, color: 'red', mouse: ƒ, move: ƒ}