精华内容
下载资源
问答
  • prototype:每个函数都有一个prototype属性,它默认指向一个object空对象(即称为:原型对象)。原型对象中有个属性constructor,它指向该函数对象。 xianshi

    prototype

    每个函数都有一个prototype属性,函数的prototype属性是在定义函数时解析器自动添加的,对应着一个对象,这个对象就是我们所谓的原型对象。它默认指向一个object空对象(即称为:原型对象)。原型对象中有个属性constructor,它指向该函数对象。

    显式原型和隐式原型

    每个函数都有一个prototype属性,即显式原型(属性)。

    每个实例对象都有一个__proto__属性,即隐式原型(属性),对象的__proto__属性是创建对象时自动添加的,默认值是构造函数的prototype属性值。

    在ES6之前程序员可以直接操作显式原型,但是不能直接操作隐式原型。

     

    //构造函数
    function School(name,address){
        this.name = name;
        this.address = address;
    }
    
    //实例对象
    var school= new School();
    
    //实例对象的私有属性 __proto__  指向它的原型对象(prototype)
    console.log(school.__proto__ === School.prototype); 
    
    //该原型对象也有一个自己的原型对象 ,层层向上直到一个对象的原型对象为 null。
    console.log(School.prototype.__proto__.__proto__); // null
    
    // 每个原型对象都有一个 constructor 属性指向关联的构造函数。
    console.log(School=== School.prototype.constructor); // true
    
    //当获取 school.constructor 时,其实 school中并没有 constructor 属性,当不能读取到constructor 属性时
    //会从 school的原型也就是 School.prototype 中读取,正好原型中有该属性,
    //相当于:school.constructor === School.prototype.constructor
    console.log(school.constructor === School); // true
    
    
    //Object.prototype.__proto__ 的值为 null 跟 Object.prototype 没有原型
    console.log(Object.prototype.__proto__ === null); // true
    
    //跟上面的类似,每个原型对象都有一个 constructor 属性指向关联的构造函数
    console.log(Object.prototype.constructor === Object); // true

    原型链

    当访问一个对象的属性时,先在自身查找,找到就返回。如果自身没有就会沿着__proto__这条链向上查找,找到就返回结果,若没有找到就返回undefined.

    所以原型链别名:隐式原型链。

    作用:就是查找对象的属性或者方法。

    总结一下:

    • 所有的对象(实例对象,函数对象,原型对象)都有隐式原型__proto__
    • 所有的函数都是Function的实例,包括Function自身。Function.__proto__ === Function.prototype
    • 函数的显式原型的隐式原型指向Object.prototype
    • Object的原型对象是原型链的尽头。Object.prototype.__proto__=== null
    • 函数的显式原型指向的对象默认是空对象{}(空对象{}是Object的实例对象)。Fn.prototype instanceof Object  // ture

    这里补充一下什么是构造函数,有些道友不知道构造函数和普通函数有啥区别。

    构造函数

    构造函数就是一个普通的函数,创建方式和普通函数没有区别。

    不同的是:

    • 构造函数习惯上首字母大写。
    • 调用方式不同,普通函数是直接调用,构造函数需要使用new关键字来调用。

    可以将一个构造函数称为一个类。使用同一个构造函数创建的对象是该类的实例,也成为了一类对象。

    展开全文
  • 我对js原型和原型链的理解

    万次阅读 多人点赞 2018-11-02 16:44:30
    我们知道在js中,万物皆对象,对象可以说是重中之重了。每一个对象都拥有自己属性。但是在这个世界中有很...在js中每个对象都有一个与它关联对象,叫做原型对象。每一次获取对象属性都是一次查询过程,当在对象...

    我们知道在js中,万物皆对象,对象可以说是重中之重了。每一个对象都拥有自己的属性。但是在这个世界中有很多东西都是相似的,可以归为一类,他们有共同的方法和属性。不可能让每一个对象都定义一个属性吧。那样太消耗内存了。所以,在js中怎么才能让多个对象共享一个或多个方法呢?原型的出现就是为了解决这个问题。

    在js中每个对象都有一个与它关联的对象,叫做原型对象(可以理解为兄弟对象,他们两个有一定的关系)。每一次获取对象属性都是一次查询过程,当在对象的自有属性中找不到时就会去查找它的原型对象。

    在js中函数也是一个对象。每个函数都有一个prototype属性(只有函数才有prototype属性),这是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。按照字面意思来理解,那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。其中原型对象会自动获得一个constructor属性,这个属性指向原来的构造函数。如下面的Man.prototype.constructor指向Man。

    function Man(name,age) {
    	this.name = name;
    	this.age = age;
    }
    
    function test() {
    	var person1 = new Man("张三","18");
    	var person2 = new Man("李四","19");
    	Man.prototype.sex = "男";
    	console.log(person1.sex); //男
    	console.log(person2.sex); //男
    }

    每个男孩共有的属性就是他的性别都是男,所以我们可以将此属性添加到实例的原型对象中去。这样每个实例都可以共享这个属性。

    我们前面说了每个函数都有prototype属性,指向函数的原型对象。他的实例对象可以共享这个属性,那我们怎么将实例对象和原型对象关联起来呢?在js中,任何对象都有一个属性叫__proto__([[prototype]]),它也是一个指针,指向构造函数的原型对象,就是我们所能共享信息的那个对象。现在我们可以画出一幅图,展示他们之间的关系。

    我们不同的对象可能会用到不同的属性,比如说一个对象需要一种属性,一个对象需要另一种属性。这时如果我们把它都定义在一个原型对象中肯定是不好的,这时我们就需要java中常说的继承。js中实现继承的方式是通过原型链。

    原型链是什么呢,根据字面意思我们可以这样理解,就是将原型连成一条链。我们上面讲过,js每一次获取对象中的属性都是一次查询过程,如果在自有属性中找不到就会去原型对象中查找,如果原型对象中还查不到,就回去原型对象的原型中查找,也就是按照原型链查找,直到查找到原型链的顶端,也就是Object的原型。

    function FutherType(){
    	this.property = true;
    }
    
    FutherType.prototype.getFutherValue = function(){
    	return this.property;
    }
    
    function SonType(){
    	this.sonproperty = false;
    }
    
    SonType.prototype = new FutherType();
    
    SonType.prototype.getSonValue = function(){
    	return this.sonproperty;
    }
    
    var instance = new SonType();
    console.log(instance.getFutherValue()); //true

    原型对象之间的关系如下图:

    此文是我阅读javascript高级程序设计后,对原型和原型链的理解,也当作学习js的笔记。 

    展开全文
  • 每次面试必问题,其实概念很抽象,不过我们先看一张图来理一下思路: 概念: ...每一个对象都有一个__proto__属性指向该对象的原型。 构造函数: 通过 new 来创建一个对象函数 实例: 通过...

    原文来自:https://juejin.im/post/5c64d15d6fb9a049d37f9c20
    每次面试必问题,其实概念很抽象,不过我们先看一张图来理一下思路:
    在这里插入图片描述
    概念:

    • 原型(prototype):
      一个简单的对象,用于实现对象的属性继承(即对象的爹);每一个对象都有一个__proto__的属性指向该对象的原型。

    • 构造函数:
      通过 new 来创建一个对象的函数

    • 实例:
      通过构造函数和new出来的对象,便是实例。实例通过__proto__指向原型,通过constructor指向构造函数。
      在这里插入图片描述

    • 原型链:
      是由原型对象组成,每个对象都有一个 __proto__的属性指向该对象的构造函数的原型,__proto__将对象连接起来形成了原型链,是一个用来实现继承和共享属性的有限的对象链。

    • 属性查找机制:
      当查找对象的属性时,如果实例自身不存在,会沿着原型链往上找,找到则输出,找不到则沿着原型链继续往上找,直到最顶层的原型对象 object.prototype,如果还没找到就返回 undefined

    • 属性修改机制:
      只会修改实例对象本身的属性,如果不存在,则进行添加该属性,如果需要修改原型的属性时,则可以用: b.prototype.x = 2;但是这样会造成所有继承于该对象的实例的属性发生改变。

    展开全文
  • 2,原型链 以下两张图阐述非常详细,感谢尚硅谷课程:http://www.atguigu.com/ 1). Object构造函数/原型/实例之间关系(图解) var o1 = new Object(); var o2 = {}; 2).构造函数/原型/实例对象关系...

    1,原型

    function Fn() {}

     1)Fn是一个构造函数,每个构造函数都会自动生成一个prototype属性,指向一个空对象,这个空对象就是原型。每一个实例对象都会从原型继承属性和方法。

     2)原型对象中有一个属性constructor, 它指向函数对象
      console.log(Date.prototype.constructor===Date)

    2, 显示原型和隐式原型
    1)每个函数function都有一个prototype,即显式原型(属性)
    2)每个实例对象都有一个__proto__,可称为隐式原型(属性)
    3)对象的隐式原型的值为其对应构造函数的显式原型的值

    4)内存结构(图)

     

     //定义构造函数
      function Fn() {   // 内部语句: this.prototype = {}
    
      }
      // 1. 每个函数function都有一个prototype,即显式原型属性, 默认指向一个空的Object对象
      console.log(Fn.prototype)
      // 2. 每个实例对象都有一个__proto__,可称为隐式原型
      //创建实例对象
      var fn = new Fn()  // 内部语句: this.__proto__ = Fn.prototype
      console.log(fn.__proto__)
      // 3. 对象的隐式原型的值为其对应构造函数的显式原型的值
      console.log(Fn.prototype===fn.__proto__) // true
      //给原型添加方法
      Fn.prototype.test = function () {
        console.log('test()')
      }
      //通过实例调用原型的方法
      fn.test()

     总结:
      * 函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象
      * 对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值
      * 程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)

    3,原型链

    以下两张图阐述的非常详细,感谢尚硅谷课程:http://www.atguigu.com/

    1). Object的构造函数/原型/实例之间的关系(图解)

    var o1 = new Object();
    var o2 = {};

     

    2). 构造函数/原型/实例对象的关系(图解)

    function Foo(){  }

    *说明:

    1)函数是Function的实例,如下图的两行代码是相等的,所以Foo是有__proto__的

    2)Function也是个函数,它是new自身产生:Function = new Function(),所以所有函数对象的__proto__都是一样的

    3)*所有函数的显示原型prototype是new Object(),所有函数对象都是new Function()生成的

    4. 需要注意的点

     /*
      1. 函数的显示原型指向的对象默认是空Object实例对象(但Object不满足)
       */
      console.log(Fn.prototype instanceof Object) // true
      console.log(Object.prototype instanceof Object) // false, Object.prototype.__proto__ === null
      console.log(Function.prototype instanceof Object) // true
      /*
      2. 所有函数都是Function的实例(包含Function)
      */
      console.log(Function.__proto__===Function.prototype)  //true
      /*
      3. Object的原型对象是原型链尽头
       */
      console.log(Object.prototype.__proto__) // null

     

     

     

    展开全文
  • JS中原型和原型链是很重要的知识点,本文内容则是我对于它的理解。建议读本文时已经有了一点的JS基础。 目录 前言 参考来源 前置技术要求 楔子 起由 null开天辟地 前因后果 函数对象、实例...
  • 本文主要介绍了js原型对象和原型链的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
  • 原型对象本质其实是一个Object实例,因为对象沿着原型链最终会指向Object原型对象。 每个函数都有一个prototype属性,该属性指向是原型对象 每个实例对象身上都有一个__proto__属性,该属性指向也是原型对象...
  • 理解JS的原型和原型链 1.prototype 在JavaScript中,每个函数都有一个prototype属性,这个属性指向函数原型对象 function Student(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } ...
  • 对于js原型和原型链的理解

    万次阅读 多人点赞 2019-06-23 22:20:23
    一、原型与原型链 JavaScript是一门基于原型语言,在软件设计模式中,有一种模式叫做原型模式,JavaScript正是利用这种模式而被创建出来 原型模式是用于创建重复对象,同时又能保证性能,这种类型设计模式...
  • 这两天在网上看了一些关于js原型原型链的一些相关知识,觉得有必要记录一下,一来是做一下总结二来是看一下自己是否真的掌握理解了。 一、原型对象 在 JavaScript 中,每当定义一个对象(函数也是对象)时候,对象...
  • 主要大家一起深入理解JS原型原型链,原型是JavaScript中一个比较难理解的概念,本文为大家解决这个难题,感兴趣小伙伴们可以参考一下
  • 原型Js强大功能之一, 在JS面向对象编程里, 原型是必不可少知识储备 Js有五种基本类型: String, Number, Boolean, undefinednull,还有三种引用类型: Array, Object, Function 例如对于array类型, 也有...
  • 【转】对于js原型和原型链继承的简单理解(第一种,原型链继承) 原型是js中的难点加重点,也是前端面试官最爱问的问题之一,因为面试官可以通过被面试者对原型的理解、来判断被面试者对js的熟悉程度。 原型...
  • 深入理解js原型链和作用域链,了解作用域链和原型链的区别一、原型链二、作用域链三、原型链和作用域链的区别:总结 一、原型链 每一个构造函数都有一个prototype属性,这个属性就叫原型对象。 每一个构造函数new...
  • 增加JS原型和原型链的理解哦哦哦哦哦哦~~~~   function Vehicle() { this.run = function () { console.log('i can run'); } } function Car() { this.load =function() { ...
  • 理解js原型原型链和继承 原型 什么是原型对象? 我们创建每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,即原型对象。 function Person(){} Person.prototype.name="Jiuto"; ...
  • js原型链与继承是js中的重点,原型的实现则是在原型链的基础上,本篇文章深入理解JS继承和原型链的问题,有兴趣的同学可以了解一下。
  • 于是通过博客中转过一篇博文和js高程学习了原型链并画了张总图,一图了解全部知识 注意:图中箭头代表等于。 其他基础知识复习部分: A.原型 1.实例构造函数属性(constructor)指向构造函数。 person...
  • 结合所学所看到的知识,谈谈自己的理解,若有错误,敬请指正。 先了解几个知识点 1.每个函数都是一个对象。每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由...
  • 1.原型 每创建一个函数,都有一个prototype属性,该属性指向一个对象,这个对象就是原型。 选择一些属性方法... 因此,当所有实例都能够proto放问到原型对象时,原型对象方法与属性就变成共有方法属性。
  • 原型和原型链的理解 先来总结一波,如下图: 简单的了解一下原型: 所有的引用类型都拥有__proto__属性(隐式原型),是一个普通的对象 所有的函数(function)都拥有prototype属性(显式原型),是一个普通对象 ...
  • 原型是所有构造函数创建出来对象祖先,这些对象共同拥有原型属性对象 原想也是一个对象 Person.prototype.name = 'sunny' function Person() { // this = { // __proto__: Person.prototype // ...
  • 理解js原型和原型链

    2016-01-18 19:56:12
    普通对象函数对象: js中,万物皆对象,大体分为两种:普通对象,函数对象。凡是通过new Function()创建都是函数对象,其他则为普通对象。 下面举例说明:function fun1(){}; //function var fun2 = ...
  • 对于js原型和原型链继承的简单理解(第一种,原型链继承)  原型是js中的难点加重点,也是前端面试官最爱问的问题之一,因为面试官可以通过被面试者对原型的理解、来判断被面试者对js的熟悉程度。 原型的...
  • js 原型 原型链 原型 解释: 原型是首创模型,代表同一类型人物、物件、或观念(维基百科)。那边对应到javascript 中来, 我们可以理解为:原型是对象创建之初的的模型,拥有同一类对象公有属性行为(方法)...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,031
精华内容 412
关键字:

js原型和原型链的理解