实例-原型链继承

构造函数是创建对象方式的一种。
可以使用 NEW 关键字来实例化对象。
其中,在创建构造函数时,首字母应大写,以便区分普通函数。
构造函数中的 this 指向实例对象。
创建一个构造函数

function Star(uname, age, sex) {
	this.uname = uname;
	this.age = age;
	this.sex = sex
}

实例化一个对象

let zs = new Star('张三', 23, '男')
console.log(zs);

输出
输出
通过构造函数可以很方便的使用 NEW 操作符来实例化对象。每实例化一个对象,都是对构造函数的属性和方法的一次拷贝。
在这里插入图片描述

通常,我们将公共属性放在构造函数内部,将公共方法放在构造函数的原型对象上。这样可以节省一部分内存。
原型对象prototype
作用:共享方法,共享构造函数中的方法;
一般将实例对象的公共属性定义在构造函数内部,
公共方法存放在原型对象prototype中。
以下代码给原型对象上添加了一个 sing 方法:

function Star(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Star.prototype.sing = function(){
    console.log(this.name + "唱歌很好听");
}
var ldh = new Star("刘德华",60,"男");
console.log(ldh);
ldh.sing();//刘德华唱歌很好听

实例对象可以直接调用 sing 方法,输出为:刘德华唱歌很好听
在这里插入图片描述
这样,所有需要使用该方法的实例对象调用该方法时都是原型对象中的相同的这个 sing 方法,就节省了内存

var ldh = new Star("刘德华",60,"男");
var zxy = new Star("张学友",56,"男");
console.log(ldh.sing === zxy.sing); //true

打印结果为 true;
说明实例对象ldh 和 zxy 调用的是同一个sing 方法。
实例对象原型 proto
在实例对象身上,系统自己会给每个实例对象添加一个 proto ,该属性是一个指针,指向构造函数的原型对象。
方法查找规则:显现看ldh实例对象上是否有 sing 方法,如果有就执行实例对象上的sing 方法,如果没有,因为有 proto 的存在,就去构造函数的原型对象身上查找 sing 方法。举个栗子:
在这里插入图片描述
在 ldh 这个实例对象上并没有找到 sing 这个方法,我们看到最下面有实例对象的原型 proto ,它指向了构造函数的原型对象,此时,因为 ldh 本身没有sing 方法,就会去它指向的构造函数的原型对象中查找
在这里插入图片描述
可以看到在它的原型对象中有sing 方法,因此可以调用:
构造函数、原型对象和实例对象的关系如下图所示:
在这里插入图片描述

我们把构造函数 Star 的公共方法存放在 Star.prototype 原型对象中,通过 new 关键字创建实例对象上有一个系统自带的对象原型 proto ,因此实例对象可以通过 对象原型 proto 来访问原型对象中存放的构造函数的公共方法。
原型对象中还有一个 constructor 属性指向了原构造函数,上面是给原型对象添加了一个公共的方法,如果添加了多个呢?

 function Star(name,age,sex){
     this.name = name;
     this.age = age;
     this.sex = sex;
 }
 Star.prototype = {
     sing : function(){
         console.log(this.name + "唱歌很好听");
     },
     movie : function(){
         console.log(this.name + "电影很好看");
     }
 }

 console.log(Star.prototype.constructor);

打印一下此时原型对象的指向:
在这里插入图片描述
此时,原型对象的指向不再是构造函数Start了,这是因为我们在给原型对象赋值时,将原来的指向给覆盖了,此时需要使用 constructor 重新指向构造函数 Star:

function Star(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Star.prototype = {
    constructor : Star,//如果修改了原来的原型对象.给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
    sing : function(){
        console.log(this.name + "唱歌很好听");
    },
    movie : function(){
        console.log(this.name + "电影很好看");
    }
}

console.log(Star.prototype.constructor);

打印结果显示,原型对象重新指向了 构造函数 Star:
在这里插入图片描述
这样就完成了给原型对象新增多个方法的操作了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值