javascript中的原型(链)和继承

本文介绍了JavaScript中的原型链概念及其实现方式,并通过具体示例展示了如何使用原型链实现对象继承,包括DOM查询封装和动物类继承的具体实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

写一个原型链继承的例子

封装一个DOM查询
function Elem(id){
    this.elem=document.getElementById(id)
}
Elem.prototype.html=function(val){
    var elem=this.elem
    if(val){
        elem.innerHTML=val
        return this
    } else {
        return elem.innerHTML
    }
}
Elem.prototype.on=function(type,fn){
    var elem=this.elem
    elem.addEventListener(type, fn)
        return this
}
var div1=new Elem('detail-page')
    div1.html('<p>hello imooc</p>').on('click',function(){
        alert('clicked')
    }).html('<p>javascript</p>')

猫狗继承的例子

function Animal(){
    this.eat=function(){
        console.log('animal eat')
    }
}
function Dog(){
    this.bark=function(){
        console.log('dog bark')
    }
}
Dog.prototype=new Animal()
var hashiqi=new Dog()

原型
所有的引用类型(数组、对象、函数),都具有对象特性,即可自由扩展属性。
所有的引用类型(数组、对象、函数),都有一个proto属性(隐式原型属性),属性值是一个普通的对象。
所有的函数,都有一个prototype属性(显式原型属性),属性值也是一个普通的对象。
所有的引用类型(数组、对象、函数),proto属性值指向它的构造函数的prototype属性值。
当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去从它的proto(即它的构造函数的prototype)中寻找。

var obj={};obj.a=100;
var arr=[];arr.a=100;
function fn() {}
fn.a=100;
obj._proto_;
arr._proto_;
fn._proto_;
fn.prototype
obj._proto_===Object.prototype

循环对象自身的属性方法

var item
for(item in f){
    // 高级浏览器已经在for in 中屏蔽了来自原型的属性
    // 但是加上这个判断能够保证程序健壮性
    if(f.hasOwnProperty(item)){
        console.log(item)
    }
}

这里写图片描述

原型对象
构造函数是什么?构造函数与其他函数唯一的区别在于调用方式不同。任何函数只要通过new来调用就可以作为构造函数,它是用来创建特定类型的对象。
先定义一个构造函数

    function Female(name){
     this.name = name;
     this.sex = 'female';  
    }
    var person1 = new Female("Summer")

这里,构造函数Female就是实例对象person1的原型!!!Female里的this关键字就指的是person1这个对象!new出来的person1对象此时已经和Female再无联系了!也就是说每一个new出来的实例都有自己的属性和方法的副本,是独立的的!修改其中一个不会影响另一个!

* 原型链*
proto:事实上就是原型链指针!!
prototype:这个是指向原型对象的
constructor:每一个原型对象都包含一个指向构造函数的指针,就是constructor
这里写图片描述
Object是作为众多new出来的实例的基类 function Object(){ [ native code ] }
Function是作为众多function出来的函数的基类 function Function(){ [ native code ] }
构造函数的proto(包括Function.prototype和Object.prototype)都指向Function.prototype
原型对象的proto都指向Object.prototype
Object.prototype.proto指向null

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值