zoukankan      html  css  js  c++  java
  • 关于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的 详解。

  • 相关阅读:
    net core 使用 rabbitmq
    asp.net core WebApi 返回 HttpResponseMessage
    asp.net core 2.1 WebApi 快速入门
    JQuery EasyUI combobox动态添加option
    php截取字符去掉最后一个字符
    JQuery EasyUI Combobox的onChange事件
    对于不返回任何键列信息的 selectcommand 不支持 updatecommand 的动态 sql 生成
    Access2007 操作或事件已被禁用模式阻止解决办法
    Easyui 中 Tabsr的常用方法
    Win 7 IE11不能下载文件,右键另存为也不行
  • 原文地址:https://www.cnblogs.com/wujianrui/p/6848999.html
Copyright © 2011-2022 走看看