构造函数、原型、原型链

一、如何准确判断一个变量是数组类型?

知识点:构造函数

  • 函数名称以大写字母开头
  • 所有的引用类型(对象、数组、函数)都有构造函数
  • var a={ }其实是var a=new Object( )的语法糖
  • var a=[ ]其实是var a=new Array( )的语法糖
  • function Foo( ){ }其实是var Foo=new Function ( )
  • 使用instanceof判断一个函数是否是一个变量的构造函数

    答案:
    用instanceof判断:变量 instanceof Array
    var arr=[ ];
    arr instanceof Array; //true
    typeof arr; //object , typeo是无法判断是否是数组的

二、描述new一个对象的过程

考察点:构造函数的问题

  1. 创建一个对象
  2. this指向这个新对象
  3. 执行代码,即对this赋值
  4. 返回this

三、原型和原型链

五条原型规则

  1. 所有的引用类型(数组、对象、函数),都具有对象的特性,即可自由拓展属性(null除外)

  2. 所有的引用类型,都有一个__proto__(隐式原型)属性,属性值都是一个普通的对象

  3. 所有的函数都有一个prototype(显示原型)属性,属性值也是一个普通对象

  4. 所有的引用类型,__proto__属性值指向它的构造函数的prototype属性值

  5. 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__(即它的构造函数的prototype)中寻找

举例:
//第一条,可自由拓展属性
    var obj={ };obj.a=100;
    var arr=[ ];arr.a=100;
    function fn( ){ }; fn.a=100;

//第二条,__proto__属性
    console.log(obj.__proto__);
    console.log( arr.__proto__);
    console.log(fn.__proto__);

//第三条,函数有prototype属性
    console.log(fn.prototype);

//第四条,引用类型的__proto__属性值指向它构造函数的prototype的属性值
    console.log(obj.__proto__===Object.prototype);
    console.log(arr.__proto__===Array.prototype);
    console.log(fn.__proto__===Function.prototype);

//第五条,引用类型的__proto__属性值指向它的构造函数的prototype属性值
    function Fooname,age){
        this.name=name;
    }
    //对函数的prototype属性(显式原型)拓展alertName属性
    Foo.prototype.alertName=function ( ){
        alert(this.name);
    }
    var f=new Foo( '张三');
    f.printName=function ( ){ 
        console.log( this.name);
    } 
    //测试
    f.printName( ) ; //f直接调用它的拓展printName属性
    f.alertName( );  //f.本身没有alertName属性,所以去它的构造函数Foo的prototype里面找

四、写一个原型链继承的例子

原型链就是把原型连接在一起组成的链,那么为什么要把原型连接在一起呢?这就是继承啦,当你new一个对象,然后把另一个对象赋值给他的原型对象

function Person(){};
function Niko(){};
Niko.prototype = new Person();

这样,Niko就具有了Person的所有属性和方法

方便理解但不推荐面试时写的例子:

function Animal( ){
    this.eat=function ( ){
    console.log(' animal eat');
    }
}
function Dog( ){
    this.bark=function ( ){
    console.log('dog bark');
    }
}
Dog.prototype=new Animal( );  //实例化一个Animal对象给dog的显式原型prototype;
var hashiqi=new Dog( );  //哈士奇有dog的属性也有animal的属性

比较实用原型链例子:

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)
}

var div1=new Elem('div1')
//console.log(div1.html())
div1.html('

你好啊 世界

') div1.on('click',function(){ alert('clicked') })

你可能感兴趣的:(前端学习笔记)