JS原型和原型链

Posted 2020-08-17 zhswater

 

 

一：题目

原型和原型链是js中比较难理解的知识点，咱们先来看几个题目

1.如何准确判断一个变量是数组类型/函数类型/对象类型?

2.写一个原型链继承的例子？（动物除外）

3.描述new一个对象的过程？

如果有缘分看到这篇文章，对这三个不是很清楚的同学请继续看下去，如果是大牛请直接跳过。

二：知识点

1.构造函数

2.构造函数-扩展

3.原型规则和示例

4.原型链

a.接下来咱们先来看看构造函数，啥也不多说，直接上代码

 

1 function Foo(name,age){
2     this.name=name
3     this.age=age
4     this.addr=‘beijing‘
5 }
6 
7 var foo=new Foo(‘zhansan‘,12)

 

b.构造函数-扩展

*var a = {} 其实是var a = new Object()的语法糖

*var b = [] 其实是var b=new Array()的语法糖

*function Foo(){} 其实是var Foo = new Function()

使用instanceof判断一个函数是否是一个变量的构造函数

 

c.5条原型规则 

1.所有的引用类型(数组，对象，函数)，都具有对象属性，即可自由扩展属性（除了NULL意外）
2.所有的引用类型（数组，对象，函数），都有一个__proto__属性，属性值是一个普通的对象
3.所有的函数，都有一个prototyoe属性，属性值也是一个普通的对象
4.所有的引用类型（数组，对象，函数），__proto__属性值指向他的构造函数的prototype属性值
5.当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找

 1 var arr= []
 2 var obj={}
 3 function fn(){}
 4 arr.a=100
 5 obj.a=50
 6 fn.a=30
 7 console.log(arr)
 8 console.log(obj)
 9 console.log(fn)
10 console.log(arr.__proto__)
11 console.log(obj.__proto__)
12 console.log(fn.__proto__)
13 console.log(obj.__proto__===Object.prototype)  // true

d.看看原型链的例子

 

 

 1 function Foo(name,age){
 2     this.name=name
 3     this.age=age
 4     this.addr=‘beijing‘
 5 }
 6 var foo=new Foo(‘zhansan‘,12)
 7 Foo.prototype.alertName=function(){
 8     alert(this.name)
 9 }
10 foo.consolename=function(){
11     console.log(this.name)
12 }
13 foo.alertName()
14 foo.consolename()
15 foo.toString()  //要去foo.__proto__.__proto__中查找

 

 

 

 接下来请看原型链继承的例子

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){
    this.elem.addEventListener(type,fn)
}

var test=new Elem(‘header‘)
console.log(test.html())
test.html(‘你在等着谁?‘)
test.on(‘click‘,function(){alert(‘你‘)})

new一个对象的过程

1.创建一个新对象

2.this指向这个新对象

3.执行代码，即对this赋值

4.返回this