一、面向对象的三大特性
- 封装:将功能相同的属性和方法写在一起,低耦合,高内聚
- 继承:是指自己没有的东西,从别人拿过来
在Js中是通过构造函数原型实现继承的
作用:继承是实现数据共享,优化内存,节省资源 - 多态:在强类型中
二、构造函数
- 构造函数:初始化对象,将共同属性和方法封装在一起,重复的使用;实例化对象;构造函数是一个函数,函数是一个对象,对象也会有构造函数。
- 构造函数定义·:构造函数里面有this
function Person(name,age,sex)
{
this.name=name;
this.age=age;
this.sex=sex;
}
- 创建对象–实例化对象用new关键字
- 用工厂模式创建对象
原型:是构造函数创建时默认创建一个原型属性
原型:每个函数都有一个原型属性-prototype此属性是是一个指针,指向原型对象
- 访问:
console.log(p2.__proto__);
console.log(Person.prototype);
console.log(Person.prototype.constructor);
—访问这个神秘对象:Person.prototype
- __proto_属性
----该使用是在实例化后的对象
-----对象名.proto
总结:
构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象拥有一个指向构造函数的指针,而实例拥有一个指向原型对象的内部指针(这就是前面所提到的[[Prototype]],即__proto__,要注意的是这个__proto__属性在chrome浏览器中是可以看到的,而在大部分浏览器是隐藏的!)
三、在js中如何继承
1、直接遍历父对象的属性,将所有的属性添加到当前对象上
var dog={};
for(var k in animal){
dog[k]=animal[k];
}
dog.back(); // 返回 Animal bark
2、利用原型替换实现继承,原型继承是指利用原型中的成员可以被和其相关的对象共享这一特性,可以实现继承
这种实现继承 方式,就叫做原型继承
子对象名.prototype=new 对象名();//实现数据共享
原型链
每个构造函数都有原型对象// 创建一个构造函数 都会默认的创建一个 构造函数的原型
每个对象都有构造函数
每个构造函数的原型都是一个对象
那么这个原型对象也会有构造函数
那么这个原型对象的构造函数也有原型对象
这样就会形成一个链式结构,称之为 原型链
原型结构的基本形式
function Perosn(name){
this.name=name;
}
var p=new Person();
// p----->Person.prototype----->Object.prototype----->null
//属性搜索原则:
//1.当访问一个对象的成员的时候,会现在自身找有没有,如果找到直接使用,
//2.如果没有找到,则去当前对象的原型对象中去查找,如果找到了直接使用,
//3.如果没有找到,继续找原型对象的原型对象,如果找到了,直接使用
//4.如果没有找到,则继续向上查找,直到Object.prototype,如果还是没有,就报错
//原型继承概念
//通过修改原型链结构实现的继承,就叫做原型继承
var obj=new Object();
var per=new Person(); p---- Person.prototype---> Object.prototype---->null
var arr=new Array();
arr--->Array.prototype--->Object.prototype---null
- this
(1)普通函数的this是window
Eg: function(){console.log(this);}
(2)定时器中的this是window
setInterval(function(){console.log(this);},1000);
(3)构造函数中的this 是实例对象
function Person(){console.log(this);} var per=new Person(); console.log(per);
(4)对象的方法中的 this 也是实例对象
function Person(){
console.log(this);
this.sayHi=function(){
console.log(this);
}
}
var per=new Person();
console.log(per);
(5)原型对象中的this 也是 实例对象
Person.prototype.eat=function(){
console.log(this); // Person 对象
}
per.eat();