• 关于JS面向对象中原型和原型链以及他们之间的关系及this的详解


    一:原型和原型对象:

    1.函数的原型prototype:函数才有prototype,prototype是一个对象,指向了当前构造函数的引用地址。

    2.函数的原型对象__proto__:所有对象都有__proto__属性, 当用构造函数实例化(new)一个对象时,会将新对象的__proto__属性指向 构造函数的prototype。

    zhangsan.__proto__==Person.prototype
    

    注:在上述代码中Person是构造函数,zhangsan则是该构造函数的一个实例化对象。

    以下用一张图来解释原型对象和函数的原型之间的关系:

    由以上图片可以清楚的看出来函数原型和原型对象之间的联系:

    zhangsan是构造函数的一个实例化对象,它的__proto__则是指向它的构造函数prototype,即Person.prototype;

    构造函数Person()的__proto__指向函数总类Function的prototype,而Function()本身也会指向Function的prototype,

    Person.prototype和Function.prototype都hi会指向Object总类的prototype,即Object.prototype,Object()的__proto__指向Function.prototype

    Object.prototype的__proto__会指向null。

    综上:

    ①所有函数的__proto__都是指向Function的prototype。

    ②构造函数new出来的对象__proto__指向构造函数的prototype。

    ③非构造函数实例化出的对象或者对象的prototype的__proto__指向Object的prototype。

    ④Object的prototype指向null

    二:this详解:

    1.谁最终调用函数,this指向谁。
    ①this指向的永远只可能是对象!!!
    ②this指向谁永远不取决于this写在哪,而是取决于函数在哪调用
    ③this指向的对象,称之为函数的上下文context,也叫函数的调用者

    2.this指向的规律(与函数调用的方式息息相关):
    this指向的情况,取决于函数调用方式有哪些,
    ①通过函数名()直接调用:this指向window
    ②通过对象.函数名()调用的:this指向这个对象
    ③函数通过数组的一个元素,通过数组下标调用的,this指向这个数组
    ④函数作为window内置函数的回调函数调用时,this指向window如setTimeout setInterval 等
    ⑤函数作为构造函数用new关键字调用时,this指向新new出的对象。

    实例:

    function func(){
    			
    		}
    

    ①通过函数名()直接调用:this指向window。

    func();
    

    ②通过对象.函数()调用的:this指向这个对象。

    狭义对象:

    var obj={
    	  name:"obj",
    	  func1:func
    	}
    obj.func1()
    

    广义对象:

    document.getElementById("div").onclick=function(){
    	this.style.backgroundColor="red";
    }
    

    ③函数通过数组的一个元素,通过数组下标调用的,this指向这个数组  。

    var arr=[func,1,2,3];
    arr[0]();
    

    ④函数作为window内置函数的回调函数调用时,this指向window。

    setTimeout(func,1000);
    setInterval(func,1000);
    

    ⑤函数作为构造函数用new关键字调用时,this指向新new出的对象。

    var obj = new func();
    

    以上就是原型链和this的 详解。

  • 相关阅读:
    Oracle-学习笔记(==》集合函数与分组四)
    Mysql--学习笔记(==》简单查询三)
    Mysql-学习笔记(==》插入修改数据二)
    Mysql-学习笔记(==》建表修改一)
    EasyUI的DataGrid 打印导出
    SQL 中ROLLUP 用法
    easyui commbox嵌入一个checkbox的实现
    Easyui Layout Center 全屏方法扩展
    Datagrid扩展方法InitEditGrid{支持单元格编辑}
    Datagrid扩展方法onClickCell{easyui-datagrid-扩充-支持单元格编辑}
  • 原文地址:https://www.cnblogs.com/wujianrui/p/6848999.html
Copyright © 2020-2023  润新知