精华内容
下载资源
问答
  • 主要介绍了JS原型和原型链原理与用法,结合实例形式详细分析了js原型和原型链概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
  • 原型的实例就是工厂按照图纸生成的工具(比如汽车),原型链(隐式的)就是生成的工具所具有的功能,而功能是工具的属性,生成什么样的工具是由工厂(构造函数)决定的,图纸是有工厂客户共同决定的 var ...
        

    原型(构造函数)就是工厂,原型的实例就是工厂按照图纸生成的工具(比如汽车),
    原型链(隐式的)就是生成的工具所具有的功能,而功能是工具的属性,
    生成什么样的工具是由工厂(构造函数)决定的,图纸是有工厂和客户共同决定的

    var carFactory =function(options){  //原型,构造函数 (工厂)
    
    this.name = options.name;  //
    
    this.color = options.color;
    
    this.run  = function(){}; //
    
    this.stop = function(){};
    
    //......
    
    }
    

    //下面是原型的实例,注意,不一定要new,carFactory({name:"法拉利",color:"orange"})本身就是一个实例,
    //可以调用对应的属性和方法如run()和stop()等,
    //这里的new是一个继承,相当于另外复制了一份,是为了重复利用该工厂,而不是只生产一辆车,专门为该车提供服务,
    //关于继承,可以参考:js继承

    var car = new carFactory({name:"法拉利",color:"orange"});//实例
    
    car //{...}
    

    //在chrome下,输出一个对象,其中 __proto__即是原型链,是指该对象隐式的含有的一些功能,
    //该功能由原型构造函数决定,而所有的原型的祖宗原型是Object,所以所有的对象都有Object的一些默认的属性和方法,如:toString等

    以下代码加深理解

    2..constructor=== Number // 2的构造者是Number
    Number.constructor ===Function//Number 的构造者是Function
    Function.constructor===Function //Function的构造者是 Function
    Math.constructor=== Object// Math的构造者是Object
    ({}).constructor===Object// {}的构造者是Object
    Object.constructor===Function //Object 的构造者是 Function
    
    2..__proto__=== Number.prototype // 2的构造者是Number
    Number.__proto__===Function.prototype //Number 的构造者是Function
    Function.__proto__===Function.prototype //Function的构造者是 Function
    Math.__proto__=== Object.prototype // Math的构造者是Object
    ({}).__proto__===Object.prototype // {}的构造者是Object
    Object.__proto__===Function.prototype //Object 的构造者是 Function
    
    展开全文
  • 原型和原型链

    2021-02-25 10:21:25
    JS原型和原型链JS原型和原型链原型prototype_proto _constructor实例与原型原型的原型原型链 JS原型和原型链 原型 prototype 在javascript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象 例如: ...

    JS原型和原型链

    原型

    prototype

    在javascript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象

    例如:

    function Person(age){
    	this.age = age
    }
    Person.prototype.name="小花"
    var person1 =  new Person()
    var person2 = new Person()
    console.log(person1)  // 小花
    console.log(person2) // 小花
    

    上述例子中,函数的prototype指向了一个对象,这个对象就是调用构造函数时创建的实例的原型,也就是person1和person2

    原型的概念:每个javascript对象(null除外)创建的时候,就会与之关联另一个对象,这个对象就是我们说的原型,每个对象都会从原型中“继承”属性
    也可以这样理解:原型(prototype)是function对象的一个属性,它定义了构造函数制造对象的公共祖先(公共属性和公共方法),通过该构造函数产生的对象,可以继承原型的属性和方法。原型也是对象
    通俗点讲:原型就是对象的模板

    我们用张图来表示 构造函数和实例原型之间的关系

    在这里插入图片描述

    _proto _

    每个对象(null除外)都会有的属性,叫做_proto_,指向该对象的原型

    function Person(){
    }
    var person = new Person()
    console.log(person._proto_ === Person.prototype) // true
    

    而关系图
    在这里插入图片描述

    补充说明:
    绝大数的浏览器都支持这个非标准的方法来访问原型,然而它并不存在Person.prototype中,实际上,它存在Object.prototype,与其说是一个属性不如说是一个getter/setter,当使用obj.proto,可以理解为返回了Object.getPrototype(obj)

    constructor

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

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

    更新关系图:
    在这里插入图片描述

    function Person(){
    }
    var person = new Person()
    console.log(person._proto_  == Person.prototype ) // true
    console.log(Person.prototype.constructor == Person) // true
    //顺便学个ES5的方法,获取对象的原型
    console.log(Object.getPrototypeOf(person) === Person.prototype) //true
    

    补充说明

    function Person (){
    }
    var person = new Person()
    console.log(person.constructor === Person) //true 
    

    当获取 person.constructor 时,其实Person中并没有constructor属性,当不能读取到construcor属性时,就会从person的原型也就是Person.prototype中读取,正好该原型中有该属性,所以

    person.constructor == Person.prototye.constructor
    

    实例与原型

    当获取实例的属性时,如果找不到,就会查找与对象关键的原型的属性,如果还找不到就找原型的原型,一直找到最顶层为止

    function Person(){
    }
    Person.prototype.name = '小花'
    var person = new Person()
    person.name = '大花'
    console.log(person.name) //大花
    delete person.name
    console.log(person.name)  //小花
    

    这个例子中给实例对象person添加了name 属性,当我们打印person.name的时候,结果自然为大花
    当我们删除了实例对象的name属性,读取person的name时,从person对象中找不到name属性就会从person的原型(person._proto _)上找,也就是Person.prototype,找到了name属性,结果为小花
    但万一找不到那?原型的原型又是什么?

    原型的原型

    在前面讲,原型其实也就是个对象,既然是对象,我们就以最原始的方法创建它,那就是:

    var object = new Object()
    object.name = '小花'
    console.log(object.name)
    

    其实原型对象就是通过Object构造函数生成的,结合之前所讲,实例的_proto _指向构造函数的prototype,所以我们再更新关系图:
    在这里插入图片描述

    原型链

    简单回顾一下构造函数、原型和实例之间的关系:
    每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原生对象的内部指针。那么我们假如让原型对象等于另一个类的实例,结果会怎么样?显然此时,原型对象包含一个指向另一个原型的指针,相应的另一个原型也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立。如此层层递进,就构成了实例与原型的链条。这就是所谓的原型链的概念。

    简单来说就是上实例与原型原型与原型的过程

    综上所诉:那Object.pprototype的原型呢

    console.log(Object.prototype._proto _ === nulll) //true
    

    null表示没有对象,即此处不应该有值

    最后一张关系图可以更新为:
    在这里插入图片描述
    图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的这条线。

    展开全文
  • JS里的原型与原型链原型原型和原型链的目的是解决构造函数生成的对象内共同属性重复生成的问题,使其更高效。在下面这个例子里每次生成一个实例对象都要生成一个mmm方法,没有必要,完全可以共享。构造函数生成的...

    JS里的原型与原型链

    原型

    原型和原型链的目的是解决构造函数生成的对象内共同属性重复生成的问题,使其更高效。在下面这个例子里每次生成一个实例对象都要生成一个mmm方法,没有必要,完全可以共享。

    构造函数生成的对象称为实例对象

    function Person(name,gender){
      this.name = name
      this.gender = gender
      this.mmm = function reader(){
        console.log('hello world')
      }
    }
    
    var person1 = new Person(Jack,male)
    var person2 = new Person(Lucy,female)

    person1person2是构造函数Person生成的两个实例对象

    function Person(name,gender){
      this.name = name
      this.gender = gender
     }
    Person.prototype.mmm = function reader(){
        console.log('hello world')
      }
    var person1 = new Person(Jack,male)
    var person2 = new Person(Lucy,female)
    
    person1.mmm // 'hello world'
    person2.mmm // 'hello world'

    上面例子里构造函数Personprototype属性就是person1person2的原型对象,原型对象添加一个mmm属性,两个实例对象都共享这个属性。

    原型链

    JS里面规定所有对象都有自己的原型对象,而原型对象也是对象因此也有自己的原型对象,而且任何一个对象都可以充当其他对象的原型,因此会形成一个原型链

    如果一层层上溯,所有对象的原型都可以追溯到Object.prototype,既Object构造函数的prototype属性,也就是说所有的属性都继承了Object.prototype的属性,这就是所有对象都有valueOf()toString()方法的原因,因为这两个方法在Object.prototype里面。
    需要注意Object.prototype的原型是null

    f9a73401426169e20e5ca26190458e49.png


    kNwh5R.md.png

    String.prototype是String公用属性引用(防止被垃圾回收)

    展开全文
  • 面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法。一、构造函数、原型与实例之间的关系 每创建一个函数,该函数就会自动带有一个 prototype 属性。该属性是个指针,指向了一个对象...

    面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法。

    一、构造函数、原型与实例之间的关系

      每创建一个函数,该函数就会自动带有一个 prototype 属性。该属性是个指针,指向了一个对象,我们称之为 原型对象。什么是指针?指针就好比学生的学号,原型对象则是那个学生。我们通过学号找到唯一的那个学生。假设突然,指针设置 null, 学号重置空了,不要慌,对象还存在,学生也没消失。只是不好找了。

      原型对象上默认有一个属性 constructor,该属性也是一个指针,指向其相关联的构造函数。

      通过调用构造函数产生的实例,都有一个内部属性,指向了原型对象。所以实例能够访问原型对象上的所有属性和方法。

      所以三者的关系是,每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。通俗点说就是,实例通过内部指针可以访问到原型对象,原型对象通过constructor指针,又可以找到构造函数。

    下面看一个例子:

    function Dog (name) {

    this.name = name;

    this.type = 'Dog';

    }

    Dog.prototype.speak = function () {

      alert('wang');

    }

    var doggie = new Dog('jiwawa');

    doggie.speak(); //wang

      以上代码定义了一个构造函数 Dog(), Dog.prototype 指向的原型对象,其自带的属性construtor又指回了 Dog,即 Dog.prototype.constructor == Dog. 实例doggie由于其内部指针指向了该原型对象,所以可以访问到 speak方法。

    7fe2c432e7d218feb91d946d43c0f9f1.png

      Dog.prototype 只是一个指针,指向的是原型对象,但是这个原型对象并不特别,它也只是一个普通对象。假设说,这时候,我们让 Dog.protptype 不再指向最初的原型对象,而是另一个类 (Animal)的实例,情况会怎样呢?

    94b84ebb2c58e7fb7691895c4c7b77df.png

    二、原型链

      前面我们说到,所有的实例有一个内部指针,指向它的原型对象,并且可以访问原型对象上的所有属性和方法。doggie实例指向了Dog的原型对象,可以访问Dog原型对象上的所有属性和方法;如果Dog原型对象变成了某一个类的实例 aaa,这个实例又会指向一个新的原型对象 AAA,那么 doggie 此时就能访问 aaa 的实例属性和 AA A原型对象上的所有属性和方法了。同理,新的原型对象AAA碰巧又是另外一个对象的实例bbb,这个实例bbb又会指向新的原型对象 BBB,那么doggie此时就能访问 bbb 的实例属性和 BBB 原型对象上的所有属性和方法了。

      这就是JS通过原型链实现继承的方法了。看下面一个例子

    //定义一个 Animal 构造函数,作为 Dog 的父类
    function Animal () {
        this.superType = 'Animal';
    }
    
    Animal.prototype.superSpeak = function () {
        alert(this.superType);
    }
    
    function Dog (name) {
        this.name = name;
        this.type = 'Dog';  
    }
    //改变Dog的prototype指针,指向一个 Animal 实例Dog.prototype = new Animal();//上面那行就相当于这么写
    //var animal = new Animal();
    //Dog.prototype = animal;
    
    Dog.prototype.speak = function () {
      alert(this.type);
    }
    var doggie = new Dog('jiwawa');
    doggie.superSpeak();  //Animal 
    

      解释一下。以上代码,首先定义了一个 Animal 构造函数,通过new Animal()得到实例,会包含一个实例属性 superType 和一个原型属性 superSpeak。另外又定义了一个Dog构造函数。然后情况发生变化,代码中加粗那一行,将Dog的原型对象覆盖成了 animal 实例。当 doggie 去访问superSpeak属性时,js会先在doggie的实例属性中查找,发现找不到,然后,js就会去doggie 的原型对象上去找,doggie的原型对象已经被我们改成了一个animal实例,那就是去animal实例上去找。先找animal的实例属性,发现还是没有 superSpeack, 最后去 animal 的原型对象上去找,诶,这才找到。

    851f5ecac5287d2490a757ff3cd3709c.png

    (希望这张图对大家的理解有帮助吧。) 

      这就说明,我们可以通过原型链的方式,实现 Dog 继承 Animal 的所有属性和方法。

      总结来说:就是当重写了Dog.prototype指向的原型对象后,实例的内部指针也发生了改变,指向了新的原型对象,然后就能实现类与类之间的继承了。(但是如果在重写原型对象之前,产生的实例,其内部指针指向的还是最初的原型对象。这个我下次再发篇文章讲。js 继承之借用构造函数继承)

    展开全文
  • 原型链和原型链的继承 这么宽泛的话题怎么描述? 1:从老大开始讲 表示对老大的尊敬 所有普通的prototype链都指向老大 Object.prototype 其包含了许多通用的功能(toString) 2: 所有的函数都会拥有prototype属性 ...
  • 上一篇文章已经总结了关于原型的两个属性,那么接下来所有原型和原型链,乃至后面的继承,都与这两个属性有关系。 原型和原型链 理解继承,首先要搞懂什么是原型和原型链。 理解原型和原型链 上面已经介绍了关于原型...
  • 但是由于其没有 类(class,ES6 引入了 class,但其只是语法糖)的概念,如何将所有对象联系起来就成立一个问题,于是就有了原型和原型链的概念。每个实例对象( object )都有一个私有属性(称之为 __proto__ )...
  • 原型对象和原型链

    2019-04-10 20:12:27
    原型对象和原型链 //原型指向可以发生改变 //实例对象中的原型__proto__指向的是创建这个对象的构造函数中的原型对象prototype //构造函数中的原型对象prototype的指向发生了改变, 实例对象中的原型__proto__指向也...
  • 总括: 结合实例阐述了原型和原型链的概念并总结了几种创建对象的方法,扩展原型链的方法。参考文章:The Secret Life of Objects,继承与原型链禄无常家,福无家门。正文原型Javascript中有一句话,叫一切皆是对象,...
  • 原型链是利用原型,让一个引用类型继承另一个 引用类型的属性方法。 为了说明白原型链,需要从构造函数、原型与实例的关系讲起。 构造函数、原型与实例的关系: 每个构造函数都有一个原型对象, 原型对象都...
  • 它没有"子类""父类"的概念,也没有"类"(class)"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承。Brendan Eich设计javascript之初是为了实现网页与浏览器之间交互的一...
  • 关于js原型链的问题,网上的文章有很多,但是大多数对于初学者来说晦涩难懂。没有结合实例,看起来总是没有什么概念,一下是我结合一个简单的例子,绘出的原型图,如有不对,欢迎指正。 代码 代码很简单,一个构造...
  • 图解原型和原型链

    2021-04-09 11:39:58
    图解原型和原型链 图解原型和原型链 原型和原型链是 JS 中不可避免需要碰到的知识点????,本文使用图片思维导图的形式缕一缕原型、原型链、实例、构造函数等等概念之间的关系???? Constructor 构造函数 首先...
  • 构造函数: 可以new的函数是构造函数 实例: 将构造函数new之后得到的就是实例,或者o1 = {name:’o1’}这样的写法 构造函数是可以使用new运算符生成一个实例 ...实例的__proto指向的构造函数的原型对象protot...
  • 即:对象具有属性proto,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型原型对象),这也保证了实例能够访问在构造函数原型中定义的属性方法。prototype:原型 (只有函数...
  • 1、构造函数的prototype指向自己的原型C:\Users\Sukla&...2、构造函数new出来的实例对象的__proto__指向这个构造函数的prototype所指向的原型C:\Users\Sukla>node > function...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,147
精华内容 1,258
热门标签
关键字:

原型和原型链实例