精华内容
下载资源
问答
  • 原型链的理解
    2022-06-23 15:52:24

    原型和原型链的理解

    • 原型:每个函数都有prototype属性,该属性指向原型对象。
      使用原型对象的好处是所有对象实例共享它所包含的属性和方法。
    • 原型链:访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会沿着它的_proto_ 属性所指向的那个对象(父对象)里找,直到为null为止,这样一层一层的就构成了原型链。
      主要解决了继承的问题。

    原型的作用

    1. 数据共享,节约内存空间。
    2. 实现继承。
      注意:函数也是一个对象,对象不一定是函数。

    proto__是对象的,prototype是函数的,因为函数也是对象,所以函数也有__proto

    举例:

    function Parent(month){
        this.month = month;
    }
    
    var child = new Parent('Ann');
    
    console.log(child.month); // Ann
    
    console.log(child.father); // undefined
    
    更多相关内容
  • 一个例子让你彻底明白原型对象和原型链 开篇 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂...
  • 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好。 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么。简单粗暴点看原型链吧,...
  • 原型链理解

    千次阅读 2020-05-06 15:10:54
    原型链 构造函数创建对象: function Person() { } var person = new Person(); person.name = 'Kevin'; console.log(person.name) // Kevin // Person 就是一个构造函数,我们使用 new 创建了一个实例对象 person...

    配图是网上找的

    原型链

    构造函数创建对象:

    function Person() {
    
    }
    var person = new Person();
    person.name = 'Kevin';
    console.log(person.name) // Kevin
    
    // Person 就是一个构造函数,我们使用 new 创建了一个实例对象 person
    

    prototype

    每个函数都有一个 prototype 属性

    每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个关联对象即原型(prototype),每一个对象都会从原型中”继承“属性

    为了方便理解,将Person构造函数理解为类,将实例化person理解为对象,只有类拥有prototype属性,而对象没有(这里只是个人为了方便理解的一种方式)

    function Person() {
    
    }
    
    // prototype是函数才会有的属性
    Person.prototype.name = 'Kevin';
    Person.prototype.age = '24';
    Person.sex = 'boy';
    
    var person1 = new Person();		// 实例化
    var person2 = new Person();
    
    console.log(person1.name)       // Kevin
    console.log(person2.age)        // 24	每一个成员都会继承原型中的所有属性
    

    proto

    每一个JavaScript实例对象(除了 null )都具有的一个属性proto,这个属性会指向该类的原型

    对象拥有_proto_属性,指向原型

    function Person() {
    
    }
    var person = new Person();
    console.log(person.__proto__ === Person.prototype); // true  实例化对象的proto属性等于原型
    

    constructor

    每个原型都有一个 constructor 属性指向关联的构造函数,实例原型指向构造函数

    function Person() {
    
    }
    console.log(Person === Person.prototype.constructor); 	// true
    

    图里没画上的线路:对象person可通过constructor得到类Person

    原型、类、对象
    (这里只是个人为了方便理解的一种方式)

    原型

    可理解为该类拥有的属性,若一个类想要操作一个属性,不能直接进行操作,必须通过原型来进行(函数对象里声明的变量不是属性),即原型、类、对象的关系可以进一步缩减理解为类和对象之间的关系,原型只是对象拥有的属性,类和对象能通过一些方法(prototype、proto)来访问到这个属性

    function Person() {
    
    }
    Person.prototype.name = 'Kevin';		// 通过原型
    Person.sex = 'boy';						// 直接操作
    
    console.log(Person.prototype)			// Person { name: 'Kevin'}
    console.log(Person.sex)					// undefined	直接设置属性失败
    console.log(Person.name)				// undefined	直接读取属性失败
    console.log(Person.prototype.name)		// Kevin		
    

    声明对象功能并实例化一个对象

    对象

    每一个对象都拥有类的全部功能,当然也可拥有类的属性,而类的属性存放在原型,通过原型进行操作,因此当对象要拿到类属性,只能在原型中拿(当对象中添加了同名属性时,优先度对象>类),当对象中找不到指定属性时,才会往上层寻找

    function Person() {
    
    }
    
    Person.prototype.name = 'Kevin';
    
    var person = new Person();
    
    person.name = 'Daisy';
    console.log(person.name) 	// Daisy
    
    delete person.name;			// 删除成员person中刚添加的name属性
    console.log(person.name) 	// Kevin
    

    对象、类、原型、Object之间的关系

    Object.prototype.age = '24';
    
    function Person() {
    
    }
    
    var person = new Person();
    Person.prototype.age_ = '23';
    
    console.log(Person.prototype);   		// Person { age_: 23 }
    console.log(Person.prototype.age) 	 	// 上面显示的是原型自己内部的属性,实际自己也继承了Object原型的age 
    console.log(Person.age);         		// 24
    console.log(person.age_);        		// 23
    
    可以分为两条链路理解:
    Object原型 → Object类 → Object对象(Object成员即其他对象的原型)
    原型 → 类 → 对象
    
    这样的好处就是只需要记住原型、类、对象的关系三者之间固有的关系即可(加上记住其他类原型即Object三者关系中的对象)
    

    完整的原型链

    ES5和ES6

    ES5中函数定义类:

    function Foo(x,y) {
        this.x = x;
        this.y = y;
    }
    
    Foo.prototype.toString = function(){
    	console.log(this.x, this.y)  
    }
    
    var foo = new Foo(1,2)
    foo.toString()  
    
    // 1 2
    

    ES6中定义类:

    调用类的方法也就是调用原型(prototype)上的方法

    class Foo {   
        constructor(x,y){
         this.x = x;
         this.y = y;
        }
        
        toString(){
         console.log(this.x, this.y)
        }
    }
    
    var foo = new Foo(1,2)
    foo.toString()  
    
    // 1 2
    

    ES6中,class实际上也是一个function对象,其原型链与es6一致,但有几点需要注意

    • 类里的constructor()方法表示构造函数,与原型链中的.constructor无关
    • 在class中声明的函数会直接添加到原型中,可以直接使用,不需要经过原型
    class Foo {   
        constructor(x,y){
         this.x = x;
         this.y = y;
        }
        
        toString(){
         console.log(this.x, this.y)
        }
    
        
    }
    
    Foo.prototype.name = 'Jack'
    var foo = new Foo(1,2)
    
    console.log(Foo)                            // Function: Foo]
    console.log(foo)                            // Foo { x: 1, y: 2 }
    
    console.log(Foo === foo.constructor)        // true    成员访问对象     foo.__proto__.constructor
    
    console.log(Foo.prototype)                  // Foo { name: 'Jack' }     对象访问原型
    console.log(foo.__proto__)                  // Foo { name: 'Jack' }     成员访问原型
    
    展开全文
  • JavaScript-原型链理解总结(自己用)

    来源:妖精的尾巴
    地址:https://www.jb51.net/article/224072.htm

    1.理解:

    原型:prototype 属性:只有函数对象具有,Object、Function、Array、RegExp、Date、Boolean、Number、String都是内置函数。prototype原型对象具有一个默认constructor属性

    原型链:__ proto __ 属性:每个对象都有,__ proto __属性是一个对象,具有constructor 和 __ proto __ 两个属性

    Object的原型对象(Object.prototype)的__proto__指向null,其他内置函数对象的原型对象(例如:Array.prototype)和自定义构造函数的 __proto__都指向Object.prototype, 因为原型对象本身是普通对象

    ()例子:(instanceof的手写实现:)

    		function instance_Of(target, resource) {
    						let r = resource.prototype 
    						let t = target.__proto__
    						 while(true) {
    							 if (t === null) return false
    							 if (r === t) return true
    							 t = t.__proto__
    						 }
    					}
    		console.log(instance_Of(new Map(),Map))//输出true
    		console.log(instance_Of(new String('1'),String))//输出true
    		console.log(instance_Of(new Number(1),String))//输出false
    

    2.原型链和原型的意义:

    增加不同子类的相同属性和方法,节省工作量,实现代码复用

    例子:

    	function persion(name,age) {
    		this.name = name
    		this.age = age
    	}
    	persion.prototype.motherland = 'china'
    	let persion1 = new persion('01', 1)
    	console.log(persion1)
    	/*输出persion {name: '01', age: 1}
    	age: 1
    	haircolor: "green"
    	name: "01"
    	[[Prototype]]: Object
    	eat: ƒ ()
    	haircolor: "black"
    	motherland: "china"
    	constructor: ƒ persion(name,age)
    	[[Prototype]]: Object
    	*/
    	let persion2 = new persion('02',2)
    	persion.prototype.haircolor = 'black'
    	persion.prototype.eat = function(){
    		console.log("eat meat")
    	}
    	console.log(persion2)
    	/*输出persion {name: '02', age: 2}
    	age: 2
    	name: "02"
    	[[Prototype]]: Object
    	eat: ƒ ()
    	haircolor: "black"
    	motherland: "china"
    	constructor: ƒ persion(name,age)
    	[[Prototype]]: Object
    	*/
    	persion1.haircolor = "green"
    	console.log(persion1)
    	/*输出persion {name: '01', age: 1, haircolor: 'green'}
    	age: 1
    	haircolor: "green"
    	name: "01"
    	[[Prototype]]: Object
    	eat: ƒ ()
    	haircolor: "black"
    	motherland: "china"
    	constructor: ƒ persion(name,age)
    	[[Prototype]]: Object
    	*/
    
    展开全文
  • 原型与原型链理解

    2022-04-14 22:06:58
    每创建一个构造函数里面都会默认有一个prototype属性,它默认指向一个Object空对象(又称为:原型对象) function Fun() { } console.log(Fun.prototype) 结果如下: (并且原型对象中都有一个...

    每创建一个构造函数里面都会默认有一个prototype属性,它默认指向一个Object空对象(又称为:原型对象)

     function Fun() {
    
        }
    
        console.log(Fun.prototype)

    结果如下:

    (并且原型对象中都有一个constructor属性,它指向函数对象)

    给原型对象添加属性(方法),函数的所有实例对象都自动拥有原型中的属性方法)

    原型又分为显式原型和隐式原型:

        显式原型:每个函数function都有一个prototype,也就是显式原型

        隐式原型:每个实例对象都有一个__proto__,也就是隐式原型

        对象的隐式原型的值=其对应构造函数的显示原型的值

    function Fun() { //内部语句:Fun(this).prototype={}
    
        }
    
    
    
        var fun = new Fun() //会内部语句:fun(this).__proto__=Fun.prototype
    
        console.log(fun.__proto__ === Fun.prototype)

    结果如下:

    也就证实了创建一个实例对象的隐式原型的值=其对应构造函数的显示原型的值

    总结:

        函数的prototype属性:在定义函数时自动添加的,默认是一个空的object对象

        对象的__proto__属性:创建对象时自动添加的,默认值为构造函数的prototype属性值

        程序员能够直接操作显式原型,但不能直接操作隐式原型(ES6之前)

    用图片解释一下:

    原型链:

        访问一个对象的属性时候,首先在自身属性中查找,查找到就返回;倘若没有,就沿着__proto__这条链向上查找,找到返回;倘若最终都没有找到,返回undefined

    原型链的作用:查找对象的属性

    ​​​​​​​

    函数的显示原型指向的对象默认是空的Object实例对象(但Object不满足)
    function Fun() {
        }
        console.log(Fun.prototype instanceof Object)
        console.log(Function.prototype instanceof Object)
        console.log(Object.prototype instanceof Object)

    运行结果:

    2.所有函数都是Function的实例(包含Function)

    function Fun() {
    
        }
    
    
        console.log(Function.__proto__ === Function.prototype)

    运行结果:

    3.Object的原型对象是原型链尽头

    function Fun() {
    
       }
    
    console.log(Object.prototype.__proto__)

    运行结果:

    总结一下:

    1. 读取对象的属性值时:会自动到原型链当中查找
    2. 设置对象的属性值时:不会查找原型链,如果当前对象没有此属性,直接添加此属性并设置其值
    3. 方法一般定义在原型中,属性一般通过构造函数定义在对象本身上
    展开全文
  • 对于js的原型和原型链理解

    万次阅读 多人点赞 2019-06-23 22:20:23
    一、原型与原型链 JavaScript是一门基于原型的语言,在软件设计模式中,有一种模式叫做原型模式,JavaScript正是利用这种模式而被创建出来 原型模式是用于创建重复的对象,同时又能保证性能,这种类型的设计模式...
  • //打印出 b() 结合(1)理解 所以在a对象的原型下面就可以找到b();如果直接f.b();就会找不到 // f.b();//报错 Uncaught TypeError: f.b is not a function 因为b对象是a对象的子集所以直接调用就会没有 g.a.__proto_...
  • 主要介绍了javascript 原型与原型链理解及应用,结合实例形式分析了javascript原型与原型链的具体原理、功能、使用方法及操作注意事项,需要的朋友可以参考下
  • js的原型链简单理解

    2022-02-25 23:29:12
    js的原型链 首先,在将js的原型链之前我们先来说一下什么是原型,当我们生成一个普通对象x的时候,这个x会有一个隐藏属性x._proto_,这个属性会指向Object.prototype也就是 x.__proto__ === Object.prototype 这个...
  • 主要和大家一起深入理解JS原型与原型链,原型是JavaScript中一个比较难理解的概念,本文为大家解决这个难题,感兴趣的小伙伴们可以参考一下
  • 原型链理解

    千次阅读 2020-12-29 19:50:14
    2.原型链,简单理解就是原型组成的链,原型也是一个对象,也有__proto__属性,原型的__proto__又是原型的原型,就这样可以一直通过__proto__想上找,这就是原型链,当向上找找到Object的原型的时候,这条原型链就算...
  • 如何理解原型和原型链

    千次阅读 2021-10-27 16:48:43
    3、而原型链就是对象通过__proto__向当前实例所属类的原型上查找属性或方法的机制,如果找到Object的原型上还是没有找到想要的属性或者是方法则查找结束,最终会返回undefined 原型理解:每一个对象创建的时候,...
  • 要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言。类有一个很重要的特性,就是它可以根据它的构造函数来创建以它为模板的对象。在javascript中,...
  • js原型链理解

    2021-06-07 19:01:32
    图片来自js原型链 个人总结: 原型:任何javascript对象都有一个prototype或_proto_属性指向它的构造函数的prototype 我理解原型链:其实就是javascript的继承机制,是指获取JavaScript对象的属性会顺着其_proto_...
  • 我所理解的从原型到原型链
  • JavaScript的原型与原型链的简单理解
  • 原型链理解(全面)

    千次阅读 多人点赞 2020-11-25 16:31:01
    创建一个实例 使用构造函数创建一个实例 function Star(age,name) { this.age = age this.name = name ...理解构造函数里面的内容,构造函数里面是有静态成员和实例成员的 实例成员就是构造函数内部通过thi
  • __ proto __(隐式原型)属性,属性值是一个普通的对象 ②所有函数都有一个prototype(显示原型)属性,属性值是一个普通的对象 ③所有引用类型的__proto__属性指向它的构造函数的prototype 二、原型链 当访问一个对象的...
  • 原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。 一、初识原型 在JavaScript中,原型也是一个对象,...
  • 由于 JavaScript 是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链。 原型 10年前,我刚学习JavaScript的时候,一般都是用如下方式来写...
  • 本篇博客针对Chrome环境下 一图表千言 1.Object对象 查看Object对象 2.Function对象 3.函数对象 ...无需创建,函数对象是JavaScript中的一种特殊类型对象,创建函数对象时即会创建一个原型对象,
  • JS中原型、原型链理解

    千次阅读 2022-04-06 22:04:43
    1.构造函数 构造函数模式的目的就是为了创建一个自定义类,并且创建这个类的实例。构造函数模式中拥有了类和实例的概念,并且实例和实例之间是相互独立的,即实例识别。构造函数就是一个普通的函数,创建方式和普通...
  • 1.prototype属性(原型对象) 在ES6之前,对象不是基于类创建,而是使用构造函数。 每一个构造函数都有prototype属性,指向另一个对象,这个对象的所有属性和方法都会被构造函数所拥有。故对于实例化对象,可以利用...
  • JS中的原型链(超清晰理解)

    千次阅读 2022-06-20 22:44:21
    原型链,所有的原型构成了一个链条,这个链条我们称之为原型链(prototype chain)。如果我们执行下面这段代码,因为没有定义address这个属性,程序结果理所当然的是undefined。 这个时候经历了什么呢?JS引擎线从Obj....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 105,939
精华内容 42,375
关键字:

原型链的理解