原型和原型链

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

变量 instanceof Array

写一个原型链继承的例子

<!DOCTYPE HTML>
<html>
<head></head>
    <body>
        <div id='div1'>hello</div>
    </body>
<script>
/*写一个封装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('div1')
    //console.log(div1.html())
    // div1.html('<p>hello imocc</p>')
    // div1.on('click',function(){
    //     alert('clicked')
    // })
    //链式操作
    div1.html('<p>hello imooc</p>').on('click',function(){
        alert('clicked')
    }).html('<p>javascript</p>')
    </script>
</html>

描述new一个对象的过程

创建一个新对象
this指向这个新对象
执行代码，即对this赋值
返回this

zepto（或其他框架）源码如何使用原型链

构造函数

function Foo(name,age){ //良好的代码习惯，构造函数首字母大写
    this.name=name
    this.age=age
    this.class='class-1'
    //return this   //默认有这一行，都会执行
}
var f=new Foo('zhangsan',20)
//var f1=new Foo('lisi',22)

/*new出很多不同的实例，类似模板的机制
new之后，首先this变成一个空对象
然后用传过来的参数对this的属性进行赋值
然后return this
无论是函数自身的属性，还是从原型中得到的属性，this 永远指向对象自身
*/

//f.printName=function(){

// console.log(this.name)

// }

// f.printName()

// f.alertName()

// var item

// for (item in f){

// if(f.hasOwnProperty(item)){

// console.log(item)

// }

构造函数—扩展

var a = {} 其实是var a = new Object()的语法塘
var a = [] 其实是var a = new Array()的语法塘
function Foo(){...} 其实是 var Foo = new Function(...)
使用instanceof 判断一个函数是否是一个变量的构造函数

原型规则和示例

5条原型规则

所有的引用类型（数组，对象，函数）都具有对象特性，即可自由扩展属性（除了null）
所有的引用类型（数组，对象，函数）都有一个 __proto__ 属性（隐式原型），属性值是一个普通的对象
所有的函数，都有一个prototype 属性（显式原型），属性值也是一个普通的对象
所有的引用类型（数组，对象，函数）__proto__属性值指向它的构造函数的‘prototype’ 属性值 console.log(obj.__proto__ === Object.prototype )
当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__(即它的构造函数的prototype)中寻找。

原型规则是学习原型链的基础

//循环对象自身的属性
var item
for(item in f){
    //高级浏览器已经在for in中屏蔽了来自原型的属性
    //但是这里建议大家还是加上这个判断，保证程序的健壮性
    if(f.hasOwnProperty(item)){
        console.log(item)
    }  
}

原型链

f.toString() //要去f.__proto__.__proto__中查找

instanceof

用于判断引用类型属于哪个构造函数的方法

posted on 2017-06-30 16:15 小蜗牛xmg 阅读(157) 评论(0) 收藏举报

刷新页面返回顶部

小蜗牛xmg

原型和原型链

导航

公告