prototype原型理解

一切都是对象,对象是若干属性的集合

  • 数组是对象、函数是对象、对象还是对象。对象里面的一切都是属性,只有属性,没有方法。方法也是属性。
  • 一切引用类型都是属性
  • 怎么判断一个值是否是对象?
    • 值类型的类型判断用 typeof , 引用类型的类型判断用 instanceof
  • 对象都是通过函数创建的    //  对象是由构造函数 Object() 创建的

原型对象

  • 每一个函数function都有一个prototype , 即原型。 prototype有一个默认的属性constructor , 指向这个函数本身

    function Foo(){ };
    console.log(Foo.prototype);  //Object{}
    console.log(Foo.prototype .constructor);  // function Foo(){}
  • 每一个对象都有一个__proto__ ( 隐式原型 ) , 指向创建该对象的函数的prototype

    function Foo(){};
    console.log(Foo.prototype);   //Object{}
    var f=new Foo();
    console.log(f.__proto__);   // Object{}
    console.log(Foo.prototype==f.__proto__) ;  // true

Prototype

  • 通过构造函数生成实例对象时,会自动为实例对象分配原型对象。每一个构造函数都有一个prototype属性 ,这个属性就是实例对象的原型对象。

    function animal(name){
      this.name=name;
    }
    animal.prototype.color="white";
    var cat1=new animal("cat");
    var cat2=new animal(‘dog‘);
    
    cat1.color;  //white
    cat2.color;  //white
  • 原型对象上所有的属性和方法,都能被派生对象共享。 原型对象的作用就是定义所有实例对象共享的属性和方法
  • 当实例对象本身没有某个属性或方法时,他会到构造函数的prototype属性指向的对象,去寻找该属性或方法

__proto__

  • __proto__是一个隐藏的属性
  • Object.prototype 是一个特例 ,它的 __proto__ 指向null
  • 函数也是对象,故函数也有隐式原型。函数是由构造函数 Function(){} 创建的,所以函数的  __proto__ 指向 Function(){} 的prototype

    function Foo(){};
    console.log(Foo.__proto__);  //function(){}
    console.log(Function.prototype);  //function(){}
    console.log(Foo.__proto__==Function.prototype);  //true
  • 需要注意的一点是 ,Function是由构造函数Function(){} ( 即它本身) 创建的,所以Function.__proto__==Function.prototype。 另外 , Fuction,prototype是一个对象,故Function.prototype.__proto__==Object.prototype.

    console.log(Function instanceof Function); //true
    onsole.log(Function.prototype.__proto__); // Object{}
  • 注解:  istanceof 运算符的实质:它依次与实例对象的所有原型对象的 constructor属性进行比较,只要有一个符合就返回true,否则返回false

原型链

  • 对象的属性和方法,有可能是定义在自身,也有可能是定义在它的原型对象。由于原型本身也是对象,又有自己的原型,所以形成了一条原型链。
  • 原型链理解: 访问一个对象的属性时,先在基本属性中查找,如果没有再沿着__proto__这条链向上找,这就是原型链
  • 原型链的作用:读取对象的某个属性时,JavaScript引擎先寻找对象本身的属性,如果找不到,就到它的原型去找,如果还是找不到,就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到,则返回undefined
  • 如果一层层地上溯,所有对象的原型最终都可以上溯到 Object.prototype
  • javascript中的继承是通过原型链来体现的
  • 相关的几个方法:
    • hasOwnProperty : 用来判断一个对象是否有你给出名称的属性或对象。此方法无法检查对象的原型链中是具有该属性,该属性必须是对象本身的一个成员。

      function Foo(){};
      var f=new Foo();
      Foo.prototype.age=12;
      f.name="dog";
      console.log(f.age);
      console.log(f.hasOwnProperty(‘name‘)); //true
      console.log(f.hasOwnProperty(‘age‘));  //false
    • isPrototypeOf : 用来判断要检查其原型链的对象是否存在于指定对象实例中,是则返回true , 否则返回false

      function Foo(){};
      Foo.prototype.age=12;
      var f=new Foo();
      console.log(Foo.prototype.isPrototypeOf(f)); //true
    • Object.getPrototypeOf () :  返回一个对象的原型 。

      function Foo(){};
      Foo.prototype.age=12;
      var f=new Foo();
      f.name="dog";
      console.log(Object.getPrototypeOf(f)); // Object{age:12}
    • Object.setPrototypeOf () :  可以为现有对象设置原型,返回一个新对象。该方法接受两个参数,第一个是现有对象。第二个是原型对象。

      var a={age:12};
      var b=Object.setPrototypeOf({},a);
      console.log(b.age); //12
时间: 2024-08-03 14:57:16

prototype原型理解的相关文章

javascript构造函数.prototype原型理解 函数.call() 方法克隆的理解

直接创建object对象 var stu = new Object(); 或 var stu = {}; stu.name="zhangsan"; stu.age = "18"; stu.fun = function(){ alert("我叫张三"); } 你也可以用讲stu当作一个模块,模块里面有多个对象,如下实例为一个简单的购物车系统的模块!var shoppingCar = {} shoppingCar.carInfo = function

JS原型,Prototype,原型

对于javascript这样一种前端语言,个人觉得,要真正的理解其oop, 就必须要彻底搞清楚javascript的对象,原型链,作用域,闭包,以及this所引用的对象等概念.这些对弄明白了,应该就可以比较自信的驾驭这种语言了. 大家都知道,javascript中的继承不是使用的类继承的机制,而是使用的另一种方式 – 原型继承.在原型继承方式中,本质上是javascript语言加入原型链这种机制,从而实现了面向对象的重要特性之一 – 继承.在这篇博文中,基于个人的理解,来说说javascript

打好基础:了解prototype原型链

一.什么是prototype 在创建构造函数时,如果在函数内进行变量声明,声明的将是私有变量,外部无法访问.会使用this来进行实例变量和函数的声明,以保证通过使用该构造函数来声明的对象可以调用这些变量和函数.然而生命实例函数会在每次新建一个对象时都复制一个一模一样的函数到栈空间,十分浪费资源.prototype可以帮助我们解决这个问题,每个构造函数都有一个原型对象,同时都有一个prototype属性,这个属性指向构造函数的原型对象,它被用来实现基于原型的继承和共享.prototype在该变量内

js prototype 原型

(1)原型理解: 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A 首先定义了baseClass类,然后我们要定义extentClass function baseClass() { this.showMsg = function() { alert("baseClass::showMsg"); } } function extendClass() { } extendClass.prototype = new baseC

JavaScript 面向对象 (prototype 原型模式)

一. JavaScript 设计思想 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时.但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力.比如,如果网页上有一栏"用户名"要求填写,浏览器就无法判断访问者是否真的填写了,只有让服务器端判断.如果没有填写,服务器端就返回错误,要求用户重新填写,这太浪费时间和服务器资源了. 因此,网景公司急需一种网页脚本语言,使得浏览器可以与网页互动.工程师_Brend

Javascript讲解系列之一 Prototype原型链

以前没有写博客的习惯,许多的技术积累都是自己稍微总结一下,很少共享,并非自私,而是工作比较忙,前几天接到一个电话面试不理想,才发现公司所用的DOJO并不被外面广泛接受,故而决定把自己所学分享出来,为夯实基础,也为与外界交流思想,形成一种渠道,如需联系,请发送至邮箱:[email protected]. 今天写Javascript系列之第一篇:Prototype原型链.在软件园里随便拉一个码农估计都会写JS,大部分也知道JS是基于原型的语言,但是如果问及JS原生对象(Object,Function

对JavaScript闭包和原型理解

最近在学js脚本的一些东西觉得里面有2个知识点比较难理解所以做了如下总结. 1.闭包 简单的理解:一个函数a ,内部有个函数b,那么这个函数b当被作为a函数的返回值得时候被外部的全局变量引用了,那么这就是一个闭包. 官方解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 如: a=function() { var n=1; b=function( n=n+1; alert(n) } return b; } var c=a()aler

你不知道的JavaScript--Item15 prototype原型和原型链详解

用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱. 每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和

【PHP 模板引擎】Prototype 原型版发布!

在文章的开头,首先要向一直关注我的人说声抱歉!因为原本是打算在前端框架5.0发布之后,就立马完成 PHP 模板引擎的初版.但我没能做到,而且一直拖到了15年元旦才完成,有很严重的拖延症我很惭愧,再次抱歉! 之前有说过以后的作品发布文章都会同步发表相应的 API 使用说明,但我觉得这还不够好而且博客平台对表格的处理和显示不是很友好,导致 API 不能完美的呈现,因此打算只提供 API 链接,大家可以通过链接直接访问到我的官网去查阅手册,那样的阅读体验是最好的.而发布的文章以后则更新一些和 API