添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
苦恼的伤痕  ·  C# assembly 反射·  1 周前    · 
想发财的菠萝  ·  Enabling Kerberos: ...·  4 周前    · 
谦逊的石榴  ·  ByteBuddy-Javaagent的使用 ...·  2 月前    · 
苦恼的山羊  ·  linux ...·  3 月前    · 
js虽然是一门基于对象的语言,但它也是可以把任何事物当成对象。在对象中,也分有函数对象和实例对象,函数对象也就是所说的构造函数。

构造函数 中有prototype这个属性,它是构造函数的原型,也是一个原型对象,这个属性是给程序员使用,是标准的属性------>prototype--->可以叫原型对象

实例对象 中有__proto__这个属性,它是实例对象的原型,也是一个原型对象,这个属性是给浏览器使用,不是标准的属性,因为有些浏览器是不支持程序员使用这个__proto__属性的。

1. 实例对象中的__proto__这个原型,与其构造函数的prototype原型,是相等的
即:实例对象.__proto__ == 其构造函数.prototype ====》 true
因为实例对象是通过构造函数来创建的,构造函数中有原型对象prototype,实例对象的__proto__指向了构造函数的原型对象prototype。
  • 利用原型进行数据共享,每一个由构造函数创建出来的实例对象都是不相等的,如
  • function Person(name){
    	this.name = name;
    	this.eat = function(){
    		console.log("food");
    var per1 = new Person("1");
    var per2 = new Person("2");
    console.log(per1.eat == per2.eat);
    //输出结果:fales
    

    这里的per1.eat 和per2.eat都是指向各自内存空间中的eat方法,这将会浪费大量的内存空间,若要解决此问题,则可使用原型好解决

    function Person(name){
    	this.name = name;
    Person.prototype.eat = function(){
        console.log("food");
    var per1 = new Person("1");
    var per2 = new Person("2");
    console.log(per1.eat == per2.eat);
    //输出结果:true
    

    此时per1.eat 和per2.eat都是指向原型中的eat方法,节省了内存空间。

  • 构造函数、实例对象和原型对象三者之间的关系
    3.1 实例对象是由构造函数创建出来的
    3.2 构造函数中有一个属性叫prototype,是构造函数的原型对象
    3.3 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己的构造函数,即反指回来
    3.4 实例对象的原型对象(__proto__)指向的是其构造函数的原型对象
    3.5 构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的
    三者关系图如下:
  • 原型中的this,指向的是实例对象
  • 原型的简单语法
  • 构造函数.prototype = {
        constructor:构造函数, //注意:这个属性必不可少,否则原型中会丢失构造器
        属性:值,
        方法名:函数
    
  • 理解了原型之后,通过原型,我们也可以对系统的内置对象添加方法
  • 实例对象调用原型中的属性或方法时,原本是实例对象.__proto__.属性\方法,但是__proto__并不是个标准的格式,所以实例对象调用原型中的属性\方法时,可以省略__proto__,直接是“实例对象.属性\方法”。
  • 前端工程师
    粉丝