2.原型和原型链

---------------------- 题目-------------------------

1. 如何准确判断一个变量是数组类型
   //变量 instanceof Array
   var arr = [];
   arr instanceof Array;//true
     
     typeof arr;  //object,typeof是无法判断是否是数组的
2. 写一个原型链继承的例子
    function Person(name,sex){
        this.name = name;
        this.sex = sex;
    }
    
    Person.prototype.showName=function(){
        alert(this.name);
    };
    
    Person.prototype.showSex = function(){
        alert(this.sex);
    };
    
    function Worker(name,sex,job){
        Person.call(this,name);
        this.job = job;
    }
    
     for(var i in Person.prototype){
        Worker.prototype[i]=Person.prototype[i];
    }
    
    Worker.prototype.showJob=function(){
        alert(this.job);
    };
    var P1= new Person('blue','men');
    var W1= new Worker('leo','men','coder');
    
    P1.showName();
    P1.showSex();
    
    W1.showName();
    W1.showSex();
    W1.showJob();
*贴近实际开发原型链继承的例子
     /*------------封装DOM查询------------------*/
    //(获取一个dom节点,获取内容,改变内容,绑定事件)
        function Element(id){
            this.elem = document.getElementById(id);
      }
    
    Element.prototype.html=function(val){
        var elem  = this.elem;
        if(val){
           elem.innerHTML = val;
           //把整个对象(div1)返回出去
           return this;//链式操作
        }else{
            //把当前html结构返回出来
            return elem.innerHTML;
        }
        
    };
    
    Element.prototype.on=function(type,fn){
        var elem = this.elem;
        elem.addEventListener(type,fn);
        //把整个对象(div1)返回出去
         return this;//链式操作
    };
    
    var div1 = new Element('main-outer');
    
    div1.html('<p>test immoc</p>').on('click',function(){
        alert('click');
    }).html('<p>javascript</p>');
3. 描述new一个对象的过程(构造函数)
    1. 创建一个新对象
    2.this指向这个新对象
    3. 执行代码,即对this赋值
    4. 返回this
    
     function Foo(name,age){
        this.name = name;
        this.age = age;
        this.class = 'class-1';
        //构造函数默认不要写return this,让它自己返回就
        // return this //默认有一行
    }

    // new 就是构造函数形成一个实例的过程
      var f = new Foo('zhangsan',20);
    //var f1 = new Foo('lisi',22);//创建多个对象
    // 考察构造函数 new 原理
4. zepto(或其他框架)源码中如何使用原型链
   * 阅读源码是高效提高技能的方式
   * 不能埋头苦钻有技巧在其中
   * 慕课网搜“zepto设计和源码分析”

--------------------------- 知识点-------------------------------

1. 构造函数
// 大写字母开头的函数是构造函数
// 构造函数类似于模板可以创建多个对象

function Foo(name,age){
    this.name = name;
    this.age = age;
    this.class = 'class-1';
    // return this //默认有一行
}

// new 就是构造函数形成一个实例的过程
var f = new Foo('zhangsan',20); 
//var f1 = new Foo('lisi',22);//创建多个对象

//*new一个构造函数返回一个对象的过程 
1、先new的时候把参数传进去(当然也可以不传)
2、new这个函数执行的时候,函数里边的this会先变成一个空对象,
再this.name这些属性的赋值,赋值完之后默认把this return回来,
赋值给f,f就具备了f.name='zhangsan'。
2. 构造函数--扩展
// 所有的引用类型(对象、数组、函数)都有构造函数;
//对象有构造函数、数组有构造函数、函数也有构造函数
var a ={}其实是var a = new Object()的简写;
  a 的构造函数是 Object;
var a = []其实是var a = new Array()的简写;
  a 的构造函数是Array 
function Foo(){...}其实是var Foo = new Function(...);
  Foo 的构造函数是Function;
  
  //推荐写法都推荐前面的写法:
  var a ={}; var a =[]; function Foo(){...}
* 使用instanceof判断一个函数是否是一个变量的构造函数;
//判断一个变量是否为“数组”:变量 instanceOf Array
3. 原型规则和示例
* 5条原型规则
// 原型规则是学习原型链的基础
1.所有的引用类型(数组、对象、函数),都具有对象特性,即可自由扩展
属性(除了"null"以外)
var obj = {};  obj.a  =100;
var arr = [];  arr.a =100;
function fn(){}  fn.a =100;
    
2.所有的引用类型(数组、对象、函数不包括null),都有一个_proto_(隐式原型)
属性,属性值是一个普通的对象
console.log(obj._proto_);
console.log(arr._proto_);
console.log(fn._proto_);

3、所有的函数,都有一个prototype(显式原型)属性,属性值也是一个普通的对象
console.log(fn.prototype);

4、所有的引用类型(数组、对象、函数),_proto_属性值指向(完全等)它的构造函数
的 "prototype"属性值
// var obj = new Object();
console.log(obj._proto_ === object.prototype);//true

5、当试图得到一个对象的某个属性时,如果这个对象(引用类型--数组、函数、对象)
本身没有这个属性,那么会去它的_proto_(即它的构造函数的prototype)中寻找。
//隐式原型等于它的构造函数显式原型
//*****一个变量本身没有属性,它会去它的构造函数的显式原型中去寻找********/
console.log(obj._proto_ === Object.prototype);
   
//构造函数
function Foo(name,age){
    this.name = name;
}

Foo.prototype.showName=function(){
    alert(this.name);
};

//创建示例
var f = new Foo('zhangsan');

f.consoleName = function(){
    console.log(this.name);
};

//测试
f.consoleName();//'zhangsan'

 //一个变量本身没有属性,它会去它的构造函数的显式原型中去寻找
 //无论是函数自身的属性还是原型中得到的一个属性,函数执行中的this永远指向f自身;
f.showName();  //'zhangsan'
*循环对象的自身属性*
/**高级浏览器已经在 for in中屏蔽了来自原型的属性,但是这里建议大家还是加上这个判断,保证程序的健壮性 **/
/**在遍历f的时候判断一下遍历出来的item是不是能通过hasOwnProperty验证;如果通过之后就说明是f自身的属性,没通过就说明是f通过原型得到的属性**/ 

//for in 可以对一个对象进行循环的
var item;
 for(item in f){
    if(f.hasOwnProperty(item)){
     console.log(item);
   }
}

4.原型链

原型链示意图.png
原型链示例.png
//构造函数
function Foo(name,age){
    this.name = name;
}
Foo.prototype.showName=function(){
    alert(this.name);
};

//创建示例
var f = new Foo('zhangsan');
f.consoleName=function(){
    console.log(this.name);
};
//测试

f.cosoleName();

/**获取的f隐式原型(f的构造函数显式原型里面的定义的一个值就是定义
的showName这个属性值并且执行了)里面的属性**/
f.showName(); 

/**当这个对象没有这个属性的时候就会去它自身的一个隐式原型(它构造函
数的显式原型)中去找***/
//构造函数是Foo  显式原型是Foo.prototype.中并没有toString这个东西
/*f.prototype构造函数的显式原型也是一个对象,在它中寻找t oString这个
方法;要去它的隐式原型(f._proto_._proto_)中去找*/
/**原型链(去f的隐式原型(f._proto_)中去找,f._proto_没有toString
f._proto_也是一个对象),在这个对象里面找toString,还得到它本身的隐式
原型中去找*/
f.toString(); 
5. instanceof--(类型判断)---是原型链一个具体的表现而已)
//用于判断引用类型属于哪个构造函数的方法
f instaceof Foo的判断逻辑是:
//》f的_proto_一层一层往上,能否对应到Foo.prototyoe
//》在试着判断f instanceof Object
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351

推荐阅读更多精彩内容