构造函数原型和继承
一、构造函数原型
我们先学习两个概念
1.1、实例成员
是在构造函数内部通过this添加的成员,实例成员只能通过实例化的对象来访问。
// 实例成员
function Star(name, age) {
this.name = name;
this.age = age;
this.sing = function() {
console.log('唱歌');
}
}
// name,age,sing都是实例成员
var s1 = new Star('小明', 18);
console.log(s1.name);//实例成员只能通过实例化的对象来访问
1.2、静态成员
在构造函数本身添加的成员,静态成员只能通过构造函数来访问。
// 静态成员
function Star(name, age) {
this.name = name;
this.age = age;
this.sing = function() {
console.log('唱歌');
}
}
Star.sex = '男'; //静态成员
console.log(Star.sex);//静态成员只能通过构造函数来访问
2、构造函数内存分配问题
先定义一个构造函数
function Fn(a,b){
this.a = a;
this.b = b;
this.add = function(){
console.log(a+b);
}
}
var f1 = new Fn(12,8);
var f2 = new Fn(14,8)
这样就造成了,每实例化一个对象都会开辟出一块空间存储构造函数的方法,造成内存浪费的问题。
3、构造函数原型prototype
- 那怎样才能大大节省内存空间呢?
JavaScript 规定,每一个构造函数都有一个prototype 属性,指向另一个对象,即原型对象。注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。
//不使用prototype情况下
function Fn(a,b){
this.a = a;
this.b = b;
this.add = function(){
console.log(a+b);
}
}
var f1 = new Fn(12,8);
var f2 = new Fn(14,8)
//虽然调用的同一方法,但是存储地址不同,故不相等
console.log(f1.add==f2.add);// false
我们可以给函数的原型添加函数,这样的话,函数所有的实例化对象都可以使用这个函数,大大减少函数重复占用内存。
// 使用构造函数的原型对象
function Fn(a, b) {
this.a = a;
this.b = b;
}
//给构造函数的原型对象添加方法
Fn.prototype.add = function (a, b) {
console.log(a + b);
}
//给构造函数的原型对象添加属性
Fn.prototype.num = '求和';
var f1 = new Fn(12, 8);
var f2 = new Fn(14, 8)
// 构造函数通过原型对象添加的函数是所有实例对象所共享的,
// 所以即使不同实例对象调用也是相等的
console.log(f1.add == f2.add);// true
console.log(f2.num == f1.num);// true
4、对象原型
即任何对象都会有一个属性 __proto__指向构造函数的 prototype 原型对象;
实例对象的__proto __属性同样指向构造函数的原型对象。
用一张图来帮助理解三者的关系:
ps:图画的一般般,将就看看!
//__prito__属性
function Play(name){
this.name = name;
}
Play.prototype.hobby = function(){
console.log(this.name+'喜欢游泳');
}
Play.prototype.age = '19';
Play.prototype.sex = '女';
var p1 = new Play('小丽');
var p2 = new Play('小芳');
p1.hobby();//小丽喜欢游泳
p2.hobby();//小芳喜欢游泳
console.log(p1.hobby==p2.hobby);//true
//证明:实例对象的__proto __属性和构造函数
//的prototype属性指向相同,都为构造函数的原型对象
console.log(Play.prototype==p1.__proto__);//true
5、constructor
在对象的原型( proto)和构造函数(prototype)原型对象里面都有一个属性 constructor 属性 ,constructor 我们称为构造函数,因为它指向构造函数本身。
注意:如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数。
function Play(name) {
this.name = name;
}
Play.prototype.hobby = function () {
console.log(this.name + '喜欢游泳');
}
var p1 = new Play('小丽');
// 以下都指向构造函数
console.log(Play.prototype.constructor);
console.log(p1.__proto__.constructor);
6、查找机制
● 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性;
● 如果没有就查找它的原型(也就是 __proto__指向的 prototype 原型对象);
● 如果还没有就查找原型对象的原型(Object的原型对象),
依此类推一直找到 Object 为止(null)。
function Play(name) {
this.hobby = name;
}
Play.prototype.hobby = '游泳';
var p1 = new Play('跑步');
// 先查找自身有没有
console.log(p1);
console.log(p1.hobby);
7、原型链
每一个实例对象都有一个__proto__属性,指向构造函数的原型对象,构造函数的原型对象也是一个对象,也有__proto__属性,这样一层一层往上找就形成了原型链。
示意图:
简单来说,层层传递的赶脚,从实例对象往上传递,直到最顶层(Object)。
8、原型对象中this指向
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
var that;
Star.prototype.sing = function() {
console.log('我会唱歌');
that = this;
}
var ldh = new Star('刘德华', 18);
一句话总结:
在构造函数中,this指向的是实例对象
原型对象中,this指向的还是实例对象
二、继承
2.1、理解继承
什么是继承?
字面意思来看就是继承,就是你理解的那个继承。
同时继承也是面向对象中三大要素之一,即(封装,多态,继承)。
继承能干什么?
可以实现对象和方法的复用,从而提高代码的利用率,也是代码优化的一种方案。
2.2、call方法实现继承
注意,我现在所说的继承都是ES6之前的,构造函数的继承
- call()
可以修改this的指向,同时调用函数,弊端是无法继承方法
- 语法结构
构造函数.call(this, 参数1,参数2)
// 构造函数的继承,es6之前
function Fn1(name,age){
this.name = name;
this.age = age;
}
Fn1.prototype.drink = function(){
console.log('太渴了');
}
function Fn2(name,age,sex){
//通过call()方法改变父方法this指向为子方法
//但此方法只能继承属性
Fn1.call(this,name,age);//此时Fn1的name,age属性已经继承到Fn2了,括号里的this是Fn2中的this
this.sex = sex;
}
var f = new Fn2('zz',19,'女');
console.log(f.name);
console.log(f.age);
// f.drink()//报错 无法继承方法
2.3、借用原型对象继承方法
//实现构造函数继承 父类的属性
function Fath(age,sex){
this.age = age;
this.sex = sex;
}
Fath.prototype.hobby = function(){
console.log('是个'+this.sex+'的,'+'喜欢喝茶');
}
function Son(age,sex,name){
// Fath.call(this,age,sex)//不推荐,只能继承属性
this.age = age;
this.sex = sex;
this.name = name;
}
// 父构造方法的实例指向子构造方法的原型对象
Son.prototype = new Fath(21,'女')
Son.prototype.sport = function(){
console.log(this.name+'喜欢打球');
}
var f1 = new Fath(19,'女');
var s1 = new Son(18,'女','小梅')
console.log(s1.age);
s1.hobby();//是个女的,喜欢喝茶
s1.sport()
f1.hobby()//是个女的,喜欢喝茶
// f1.sport()//喜欢打球 报错 父函数无法访问子函数中的方法
2.4、class继承
我们现在说说es6之后类的继承
//ES6中 class 的继承
class F1{
constructor(name,age){
this.name = name;
this.age = age;
}
eat(){
console.log('吃鸡腿');
}
}
// F2继承F1
class F2 extends F1{
constructor(name,age,sex){
//子类中用super去调用父类的constructor
super(name,age);
this.sex = sex;
}
}
var f2 = new F2('小红',19,'女');
console.log(f2.age);
f2.eat()
经典案例 为数组对象增加内置方法
// 给Array本地对象增加一个原型方法,它用于删除数组条目中重复的条目
Array.prototype.quchong = function(arr){
var new_arr = [];
for(var i=0;i<arr.length;i++){
if(new_arr.indexOf(arr[i])==-1){
new_arr.push(arr[i])
}
}
return new_arr;
}
var resu = Array.prototype.quchong([23,23,45,45,67,23,67,89,89,23]);
console.log(resu);