JavaScript的继承

  1. 构造函数继承
function Man(age){
    this.age = age
}
var girl = new Man('25');

使用new关键字生成实例,this就会绑定到实例上。
过程:

  1. 在内存中生成一个实例对象object,
  2. 指定实例对象的_proto_到构造函数的prototype,
  3. 运行构造函数,想当于:Man.call(object)
  4. 检查返回值,如果返回值为基本数据类型,则无视该返回值,而将生成的对象返回。如果为引用类型,则将该返回值返回。
    虽然构造函数比较好用,但是存在内存浪费的问题:每实例一个对象,就是占用一些内存。

JS规定,每一个构造函数都有一个 prototype 属性,指向一个对象,这个对象的所有的方法和属性,都会被构造函数的实例继承。

instanceof运算符:验证原型对象与实例之间的关系:

//判断是否是某个函数的实例  instanceof
console.log(boy instanceof Boy)

isPrototypeOf:判断 prototype 对象和某个实例之间的关系:

console.log(Man.prototype.isPrototypeOf(boy))

hasOwnPrototy:每个实例对象都有一个 hasOwnPrototy 方法,用来判断某一个属性到底是本地属性还是继承而来的属性

//验证实例对象的某个属性是本地属性 还是继承自prototype对象的属性   hasOwnProperty
console.log(boy.hasOwnProperty('eat'))

in:验证实例是否包含某个属性

//验证实例是否包含某个属性  不管是不是本地还是继承而来  in
console.log('age' in boy)

call 与 apply:都是为了改变某个函数运行时的context即上下文而存在的,换句话说就是改变函数内部this的指向。
其中call是以列表的形式传参,apply是以数组的形式传参。
实现继承:将父对象的构造函数绑定到子对象上,

function Man(age){
   this.age = age;       
}
Man.prototype.eat = function(){
   console.log('eat')
}
function Boy(name,age){
   Man.call(this,age);
   this.name = name;
}

prototype:

  1. 一切引用类型都是对象
  2. 对象是属性的集合
  3. 对象都是通过构造函数创建的
  4. 每个函数都有一个 prototype 属性,即原型。对象都有一个 属性 proto 属性,可以理解为隐式原型。
  5. 每个对象的_proto_属性都指向创建该对象的构造函数的 prototype
  6. Object.prototype._proto_指向为null

原型链:
访问一个对象的属性时,现在本地属性中查找,如果没有,就会沿着 _proto_这条链向上查找,这就是原型链。
其中;instanceof 会沿着原型链查找 hasOwnPrototy不会沿着原型链查找 isPrototypeOf方法 会沿着原型链查找 in会沿着原型链查找。

constructor 属性:函数的prototype 有一个constructor属性,该属性指向函数本身。对象没有constructor属性,它沿着原型链使用的是对象的构造函数的constructor属性。

原型链继承:将一个构造函数的原型指向另一个构造函数的实例对象来实现继承

function Man(age){
   this.age = age;
              
}
Man.prototype.eat = function(){
    console.log('eat')
}
function Boy(name,age){
    this.name = name;
}
          
Boy.prototype = new Man();
Boy.prototype.constructor = Boy;
var boy = new Boy('ykx',23);
boy.eat()

如果不将Boy的 prototype 的constructor指向改过来,就会指向Man,发生原型错乱

混合继承:即构造函数继承属性,原型链继承方法。

function Man(age){
   this.age = age;
              
}
Man.prototype.eat = function(){
    console.log('eat')
}
function Boy(name,age){
    Man.call( this, name, age);
   //Man.apply( this, [name,age] )
    this.name = name;
}
          
Boy.prototype = new Man();
Boy.prototype.constructor = Boy;
var boy = new Boy('ykx',23);
boy.eat()
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值