精华内容
下载资源
问答
  • 原型与原型链

    2018-05-24 14:02:33
    想深入理解原型与原型链,我们必须理解以下几个问题:1、什么是原型?2、什么是原型链?3、prototype与__proto__有什么不同,有什么联系?1、什么是原型?JavaScript 中,万物皆对象!但对象也是有区别的。分为普通...

    在JavaScript的使用过程中,我们经常会遇到prototype,可能了解一点,它是一个对象的原型,用来做原型继承的。

    想深入理解原型与原型链,我们必须理解以下几个问题:

    1、什么是原型?

    2、什么是原型链?

    3、prototype与__proto__有什么不同,有什么联系?


    1、什么是原型?

    JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object ,Function 是JS自带的函数对象。每个对象都有原型(null和undefined除外),你可以把它理解为对象的默认属性和方法。


    你可以把下面的代码在浏览器打印出来看一下。

    console.log(Object.prototype); 
    //Object{}
    var o = new Object();
    console.log(o.prototype);  //undefined
    console.log(Array.prototype); 
    //[Symbol(Symbol.unscopables): Object]
    console.log(Function.prototype); 
    //function(){}
    function hello(){
    console.log("hello");
    }
    hello.prototype = "hello world";
    console.log(hello.prototype); 
    //hello world
    

    Object:Object是一个函数对象,Object的原型就是一个Object对象,它里面存在着一些对象的方法和属性,例如最常见的toString方法。

    新建对象:用new Object或者{}建的对象是普通对象,它没有prototype属性,只有__proto__属性,它指向Object.prototype。

    Array:Array也是一个函数对象,它的原型就是Array.prototype,它里面存在着一些数组的方法和属性,例如常见的push,pop等方法。

    Function:Function也是一个函数对象,但它有点特殊,它的原型就是一个function空函数。

    自定义函数:它的原型就是你给它指定的那个东西。如果你不指定,那它的原型就是一个Object.prototype。




    2.什么是原型链

    在JavaScript 中,每个对象都有一个指向它的原型(prototype)对象的内部链接。这个原型对象又有自己的原型,直到某个对象的原型为 null 为止(也就是不再有原型指向),组成这条链的最后一环。这种一级一级的链结构就称为原型链(prototype chain)

    JavaScript 对象是动态的属性“包”(指其自己的属性)。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依此层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。

    var o = {
    	a:1,
    	b:2
    };
    console.log(o.toString()); 
    //不报错,o上没有toString方法,但是Object上有
    console.log(o.push("c")); 
    //报错,o上没有这个方法,Object上也没有这个方法。
    console.log(o.a); //1
    console.log(o.c); //undefined
    

    当你用new Object或者直接定义一个对象时,它的原型链就是:

    o == Object.prototype == null
    

    但你访问o上没有的属性或方法时,JS会往Object.prototype上寻找该属性和方法。如果有则直接返回,如果没有,方法则报错,这个方法未定义,属性则返回undefined。

    function Person(name){
    this.name = name;
    }
    Person.prototype = {age:24};
    var tsrot = new Person("tsrot");
    console.log(tsrot.name); //tsrot
    console.log(tsrot.age);  //24
    console.log(tsrot.toString()); //[object Object]
    

    当你用构造函数(构造函数我们一般首字母大写)建立一个对象时,它的原型链就是:

    tsrot == Person.prototype == Object.prototype == null
    

    如果没有定义Person.prototype这一环,则直接跳到下一环。

    来点更复杂的。

    function Parent(){
    this.name = "i am parent";
    }
    Parent.prototype = {age:24};
    function Child(){
    this.name = "i am child";
    }
    Child.prototype = Object.create(Parent.prototype); 
    //让Child的原型指向Parent的原型
    Child.prototype.constructor = Child; 
    //把child的构造函数指向回来,否则它将指向Parent。
    虽然在这没什么影响但要养成代码的严谨性
    
    var child = new Child();
    console.log(child.name); //i am child
    console.log(child.age); //24
    console.log(child.toString()); //[object Object]
    

    当你需要父类的属性和方法时,你可以把它的原型指向父类的原型。此时的原型链就是:

    child == Parent.prototype == Object.prototype == null
    
    var arr = [1,2,3];
    console.log(arr); 
    //[1,2,3]
    arr.push(4);
    console.log(arr); 
    //[1,2,3,4]
    

    数组也是一个对象,不过它是由Array构造函数new而来的,所以它的原型链就是:

    arr == Array.prototype == Object.prototype == null
    
    var fun = function(){
    var hello = "i am function";
    }
    console.log(fun.name); 
    //fun
    

    fun是一个函数对象,它是由Function构造函数new而来的,所以它的原型链就是:

    fun == Function.prototype == Object.prototype == null
    

    fun它没有name属性,但是Function它有,所以这个name就是Function原型上的。



    3、prototype与__proto__有什么不同,有什么联系?

    在Javascript中,每个函数都有一个原型属性prototype指向自身的原型,而由这个函数创建的对象也有一个__proto__属性指向这个原型,而函数的原型是一个对象(函数点prototype也是一个普通对象,Function.prototype除外,它是函数对象,但它很特殊,他没有prototype属性),所以这个对象也会有一个__proto__指向自己的原型,这样逐层深入直到Object对象的原型,这样就形成了原型链。普通对象没有prototype,但有__proto__属性。

    function f1(){};
    console.log(f1.prototype) 
    //Object{}
    console.log(typeof f1.prototype) 
    //Object
    console.log(typeof Function.prototype) 
    // Function,这个特殊
    console.log(typeof Object.prototype) 
    //Object
    console.log(typeof Function.prototype.prototype) 
    //undefined
    

    JS在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做__proto__的内置属性,用于指向创建它的函数对象的原型对象prototype。



    普通对象的__proto__


    var o = {name:"tsrot"};
    console.log(o.__proto__); 
    //Object{}
    console.log(o.prototype); 
    //undefined
    console.log(o.__proto__ === Object.prototype);  
    //true
    

    构造对象的__proto__


    function Parent(){
    this.name = "i am parent";
    }
    Parent.prototype = {age:24};
    function Child(){
    this.name = "i am child";
    }
    Child.prototype = Object.create(Parent.prototype);
    Child.prototype.constructor = Child;
    var child = new Child();
    console.log(child.__proto__); //Object{}
    console.log(Child.prototype); //Object{}
    console.log(child.__proto__ === Child.prototype); 
    //true
    console.log(Parent.prototype.__proto__ === 
    Object.prototype); //true
    

    数组的__proto__


    var arr = [1,2,3];
    console.log(arr.__proto__);  
    //[Symbol(Symbol.unscopables): Object]
    console.log(Array.prototype); 
    //[Symbol(Symbol.unscopables): Object]
    console.log(arr.__proto__ === Array.prototype); //true
    

    函数的__proto__


    var fun = function(){
    var hello = "i am function"
    }
    fun.prototype = {name:"tsrot"};
    console.log(fun.prototype); 
    //Object {name: "tsrot"}
    console.log(fun.__proto__); 
    //function(){}
    console.log(fun.prototype === fun.__proto__); 
    //false
    console.log(fun.__proto__ === Function.prototype); 
    //true
    

    展开全文
  • 简述原型与原型链

    2020-02-16 17:25:56
    我们从三点来解答原型与原型链 1. 什么是原型,原型链? 2. 原型与原型链的关系网又是什么? 3. 作用又是什么? 1. 什么是原型? 原型分为prototype(原型)和_proto_ (隐式原型), 而prototype(原型)则是每个函数...

    前提条件:要想搞清楚一个问题,不是他人讲解就能明白的,主要还是要靠自己的摸索与查阅资料才行。

    我们从三点来解答原型与原型链
    1. 什么是原型,原型链?
    2. 原型与原型链的关系网又是什么?
    3. 作用又是什么?

    1.
    什么是原型?
    原型分为prototype(原型)和_proto_ (隐式原型),
    而prototype(原型)则是每个函数对象都有的一个属性,proto_则是每个对象都会有的一个属性。并且他们的指向都会指向一个对象,而这个对象则是原型对象,除了“null”以外。
    那么这个原型什么时候产生的呢?
    原型的产生有三种方式
    第一种:字面量方式:var fun={ },相当于就是var fun=new Object();
    第二种:构造器方式
    第三种:Object.create方式
    较为特殊的是第三种,因为它的_proto
    (隐式原型)继承于它括号内的参数

    三种方式的例子:
    1.
    var fun={ };
    2.
    function Fun() {   }
    var fun= new Fun();
    3.
    var fun={};
    var funs=Object.create(fun);
    

    什么是原型链?
    其实原型链就是由_proto_属性连起来的一条链条。万物皆对象,因此每个对象都有_proto_属性,通过递归访问_proto_必须最终到头,而最终端则是null.

    在这里插入图片描述


    2.我们通过一个例题来进行原型与对象以及原型链来进行查看。
    在这里插入图片描述
    这里要补充下,每个原型对象都有constructor(构造)属性,他们都指向构造函数。


    3.原型对象的应用场景
    3.1:使用原型对象扩展自定义对象
    3.2:扩展数组类(Array)的功能
    ……

    总结

    总归来说JavaScript 对象(除了 null)在创建的时候就会关联一个对象,这个对象就是原型,每一个对象都会从原型上继承属性,原型也是对象,所以原型也有原型对象,层层往上,直到 Object.prototype,这就是原型链。对象都会有一个 proto 属性来访问自己的原型,同时这个原型就是生成该对象的构造函数的 prototype 属性值。每个原型对象都有一个 constructor 属性,指向相关联的构造函数。

    展开全文
  • 原型对象 prototype 任意构造器中都有prototype属性,该属性的值为一个对象,这个对象就叫做原型对象 隐式原型 proto 任意对象(除null)中都有属性_proto_ ,该属性会指向这个对象的原型对象。 任意对象(除...

    原型对象 与 prototype

    任意构造器中都有prototype属性,该属性的值为一个对象,这个对象就叫做原型对象

    隐式原型 与 proto

    任意对象(除null)中都有属性_proto_ ,该属性会指向这个对象的原型对象。
    任意对象(除null)中都有属性constructor,该属性指向创建这个对象的构造器。

    原型链

    对象属性查找机制。先在自己的私有属性种找,无。则沿着_proto_去原型对象中找,再无,继续沿着_proto_去原型对象的原型对象中找。直至找到Object的原型对象(Object的_proto_指向null)为止。这样形成的一条查找链就是原型链。
    如果一直没有找到,结果为undefined。

    对应关系图解
    原型链示意

    代码

    原型链代码段

        <script>
        function Fn(num){
            this.x=this.y=num;
        }
        Fn.prototype={
            x:20,
            sum:function(){
                console.log(this.x+this.y)
            }
        }
        Fn.prototype.constructor=Fn;
        let f1 = new Fn(10);
        console.log(f1.sum===Fn.prototype.sum)
        f1.sum();
        Fn.prototype.sum();
        console.log(f1.constructor)
        </script>
    

    解释

    Fn构造器(Fn构)prototype属性指向Fn构的原型对象(Fn原)
    Fn原有constructor属性指回Fn构

    Fn.prototype={
     x:20,
    sum:function(){
        console.log(this.x+this.y)
       }
    }
    

    将Fn的原型对象指向改变,指向一个新的对象A。新对象A内容为{}内容

    Fn.prototype.constructor=Fn;
    

    新对象A中添加constructor属性,值为Fn。先新建new一个空对象,然后在赋值。

    在这里插入图片描述

    我的理解

    1)F构造器prototype属性指向F构的原型对象(F原)
    2)F原有constructor属性指回F构
         F原有_ _ proto_ _指向一个object的原型对象(创建这个原型对象的构造器的原型对象)
    3)object原型对象(o原)有一个constructor属性指回object构造器(o构)
       o原有_ _proto_ _指向null
       同样,o构有prototype属性指向o原
    
    4)查找一个对象的属性,先在自己的原型对象上找
       如果没有找到,则沿着_proto_去原型对象中找,直至找到object中的原型对象null
    5)_proto_属性中的值为null。最终没有找到为undfine
    
    展开全文
  • JavaScript-原型与原型链详解

    多人点赞 热门讨论 2020-06-17 11:54:32
    原型与原型链原型与原型链原型原型链列子 ---思考---`indexOf()`列子---给每个字符串实例添加一个翻转方法 `reverse`例子---思考---例子---思考---Vue中挂载全局的axios判断 对象类型 原型与原型链 原型 每个class...

    原型与原型链

    原型

    • 每个class(类) 和函数都有一个显示原型 prototype 存放函数 或 类的公用方法和属性
    • 每一个实例都有一个隐式原型 __proto__
    • 实例的 __proto__ 指向的是对应函数 或 类的 显示原型 prototype

    原型链

    • 获取对象的属性 或 方法时,先查找对象自身的属性和方法,如果找不到
    • 则去查找隐式原型 __proto__ 中的属性 或 方法
    • 如果再次查找不到,就继续向上查找 __proto____proto__ 直到倒找 或 null为止,返回undefined
    • 把有__proto__组成的链条关系称为原型链
    • js对象通过__proto__原型链实现了继承
    function Person(name,age) {
    	this.name = name;
    	this.age = age;
    	// this.say = function() {
    	// 	console.log("大家好我是:" + this.name + "今年" + this.age);
    	// }	
    	// 这个say方法时一个公用方法,所以可以使用原型,加载到隐式原型__proto__上
    }
    // 这个被加载到了__proto__ 隐式原型上了
    Person.prototype.say = function() {
    	console.log("大家好我是:" + this.name + "今年" + this.age)
    }
    var p1 = new Person("小站",18);		// new  实例化对象
    console.log(p1)		// Person {name: "小刚", age: 11}
    console.log(p1.age)		// 18
    console.log(p1.name)		// 小站
    console.log(p1.say())		// (大家好我是:小站今年18)  undefined
    // 因为原型链的原因,先去查找p1实例中的显示原型prototype中的方法,没找到,say方法
    // 去找隐式原型__proto__中的方法,发现找到了,say方法 这种一层一层找的关系就是原型链的
    

    列子 —思考—indexOf()

    var str = "i love you";
    str.indexOf("o");	// 为什么一个字符串会有indexOf方法??
    console.log(str.__proto__);		// 我们查找隐式原型__proto__,发现了很多方法,indexOf方法也在里面
    

    列子—给每个字符串实例添加一个翻转方法 reverse

    // 给所有的String都自定义添加一个让字符串翻转的方法reverse
    String.prototype.reverse = function() {
    	return this.split("").reverse().join("");
    }
    // 例子
    var str = "I love you";
    str.reverse();		// "uoy evol I"
    

    例子—思考—

    • 执行 Object实例公用方法 toString this为 []
    Object.prototype.toString.call([]);
    
    

    例子—思考—Vue中挂载全局的axios

    • 给vue的所有实例和组件 添加一个$Axios方法
    • 在组件内部
    • this.$Axios.get();
    • this指向的vue的实例 就可以通过 this.$Axios在每个组件都可以使用这个公用方法
    // 定义时
    Vue.prototype.$Axios = axios;
    // 访问时
    this.$Axios...
    

    判断 对象类型

    • typeof
    • Object.prototype.toString.call() 最准确
    • instanceof 用法:变量 instanceof 对象
      • 是否为XXX实例,如果在原型链__proto__ 有右侧对象就返回true
    • constructor 构造函数
      • eg: p1.constructor === Person // true
    • isArray 判断是否为数组
    展开全文
  • JS原型与原型链

    千次阅读 2020-03-07 12:39:14
    原型与原型链 JavaScript有着七种基本类型String、Number、Boolean、Null、Undefined、Symbol、Object,前六种为基本数据类型,Object为引用类型。函数本质上是Object类型,也就是一个对象。 值得注意的是typeof ...
  • JavaScript原型与原型链

    2018-07-20 16:26:34
    JavaScript原型与原型链 原型 1、每个函数都有一个prototype属性,它默认指向一个Object空对象(即称为: 原型对象),原型对象中有一个constructor,它指向函数对象 2、给原型对象添加属性(一般都是方法),作用...
  • JS原型与原型链总结

    2020-08-18 18:40:50
    JS原型与原型链总结: 一、专有名词总结 构造函数: 区别:构造函数与其他函数的区别,会new实例化对象,每一个构造函数都有一个原型对象,还有一个原型属性prototype function Female(name){ this.name = ...
  • JavaScript显示原型与隐式原型 显示原型是什么?隐式原型是什么? 显示原型 在每一个函数里边都有一个prototype的属性,而这个属性指向了prototype对象,这个prototype就是显示原型,我们来看一下实例: //定义函数 ...
  • JavaScript原型与原型链目录 《JavaScript原型初学者指南》 《Object.hasOwnProperty方法》 《JavaScript的原型和原型链(一)》 《JavaScript的原型和原型链(二)》 《JavaScript的原型和原型链(三)》 ...
  • 原型与原型链总结

    2018-09-26 11:17:24
    原型与原型链 在 JavaScript 中,每当定义一个对象(函数也是对象)时候,对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性,这个属性指向函数的原型对象。 每个对象都有 proto 属性,但...
  • javascript学习之原型与原型链
  • JS 原型与原型链 (四)

    2019-08-16 22:20:38
    JS 原型与原型链 (四)
  • 想知道自己Js原型与原型链掌握的怎么样?来做个题试试吧! Js原型与原型链图示: 问题集锦: 问题1: var A = function() {}; A.prototype.n = 1; var b = new A(); A.prototype = { n: 2, m: 3 } var c ...
  • 前端开发之原型与原型链

    千次阅读 2018-11-12 12:37:33
    前端开发之原型与原型链 原型和原型链估计做前端开发的人都听说过,而且这个是一道很常见的面试题,但是想要真正弄清楚“什么是原型”,”什么是原型链“”,”他们又有什么用“”,“适合在哪些实际场景中使用”...
  • 原型与原型链 所有函数都有一个特别的属性: prototype : 显式原型属性 所有实例对象都有一个特别的属性: __proto__ : 隐式原型属性 显式原型与隐式原型的关系 函数的prototype: 定义函数时被自动赋值, 值默认...
  • 原型与原型链,是所有JS初学者的噩梦,虽然工作过程中用不到,但是理解他对于我们写代码,看源码都有很大的提升,下面就带大家一步一步,认识原型与原型链 原型 原型的概念:每一个javascript对象创建的时候,就会与...
  • 原型与原型链 – 笔试 - 05 function A() {}; A.prototype.n = 1; var b = new A(); // b 实例对象已经建立原型连接 // 原型对象指向被改变,不会切断 b 实例对象的的指向 A.prototype = { n: 2, m: 3 }; var c = ...
  • 本文总结了原型以及原型链的一些概念和规律,并且提供了代码示例进行说明。有助于更深一步的理解原型与原型链。
  • 三篇文章都更新完毕,完整的剖析了 JS 原型与原型链,希望通过这些教程能让你对 Javascript 这门语言理解的更透彻! https://www.jianshu.com/p/dee9f8b14771
  • 最近面试经常被问道原型与原型链,prototype 与 _proto_ 那么这两个有什么区别呢!!看下面解释 var a_object=new a() ; a_object.name() ; 每个函数都有一个prototype属性 new出来一个a_object实例 这个a...
  • javascript原型与原型链

    千次阅读 2020-07-27 16:58:39
    1.prototype 每个函数都有一个...当读取实例的属性时,如果找不到,就会查找对象关联的原型中的属性,如果还查不到,就去找原型原型,一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__pr
  • JavaScript原型与原型链学习总结 在JavaScript中,每个对象皆有原型。普通对象有_proto_(原型)属性,创建的每一个函数有prototype(原型属性),这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由...
  • 我把这三句话称之为理解原型与原型链的“三板斧”第一句话:每一个函数数据类型(普通函数、类)都天生自带一个属性prototype(原型),它是一个对象数据类型的值,在当前prototype中,存储了 类需要为其实例使用的...
  • 为了说明白原型链,需要从构造函数、原型与实例的关系讲起。 构造函数、原型与实例的关系: 每个构造函数都有一个原型对象, 原型对象都包含一个指向构造函数的指针(显式原型), 而实例都包含一个指向原型...
  • 原型与原型链是JS中一个难点,也是其他语言不具有的特点之一。 1. 原型链作用:利用修改原型链的结构(增删改节点中的成员),使得实例对象可以使用整条原型链中的所有成员。 2. 对象的原型链:凡是对象都有原型;...
  • 有关原型与原型链的面试题目

    千次阅读 2018-07-03 21:46:22
    //有关原型与原型链的面试题目 { function Fn(){ this.x = 100; this.y = 200; this.getX = function () { console.log(this.x); } } Fn.prototype.getX = function () { console.log(this.x); }; ...
  • 【JavaScript】第三章 原型与原型链

    千次阅读 2019-02-01 19:29:46
    2.原型与原型链 题目: 15. 如何准确判断一个变量是数组类型 16. 写一个原型链继承的例子 17. 描述new一个对象的过程 18. zepto(或其他框架)源码中如何使用原型链 知识点: 19. 构造函数(函数名首字母大写) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,717
精华内容 11,486
关键字:

原型与