精华内容
下载资源
问答
  • js的原型和原型链

    2021-02-19 10:52:11
    (转载)js的原型和原型链 https://www.jianshu.com/p/be7c95714586

    (转载)js的原型和原型链

    (感觉这个说的通俗点,做下记录)
    https://www.jianshu.com/p/be7c95714586

    展开全文
  • JS的原型和原型链

    2019-02-20 23:37:47
    函数(function) function foo() {} // 函数声明 ...函数对象(function object):代表函数对象 var foo = new function() {} function Foo() {} var foo = new Foo(); 本地对象(native object) ...

    函数(function)

    function foo() {}   // 函数声明
    var foo = function() {}  // 函数表达式

    函数对象(function object):代表函数的对象

    var foo = new function() {}
    
    function Foo() {}
    var foo = new Foo();
    

    本地对象(native object)

         独立于宿主环境的ES实现提供的对象,是ES定义的类(引用类型),包括:Object、Function、Array、String、Boolean、Number、Date、RegExp、Error,EvalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError.

    内置对象(build-in object)

         ES实现提供的独立于宿主环境的所有对象,在ES程序开始执行时出现,已经被实例化了。Global和Math(每个内置对象都是本地对象)

    宿主对象(host object)

         由ES实现的宿主环境提供的对象,可以理解为:浏览器提供的对象。所有的BOM和DOM都是宿主对象

     

    prototype

         是每个函数都具有的属性,但不是每一个对象都有的属性

    function Foo(){}
    
    var foo = new Foo();

    以上,Foo中有prototype属性,而foo没有。但是foo中的隐含_proto_属性指向Foo.prototype

    JS 中所有的数据类型都是对象,为了实现面向对象,利用“继承”将所有的对象连接起来,通过new的方式来实现实例

    _proto_

    _proto_属性是每一个对象以及函数都隐含的一个属性,都是指向到创建它的构造函数的prototype。原型链就是通过这个属性构建的。

    function a() {}
    function b() {}
    
    var b1 = new b();
    a.prototype = b1;
    var a1 = new a();
    
    a1._proto_ === b1; // true
    a1._proto_._proto_ === b.prototype;  //true
    a1._proto_._proto_._proto_ === Object.prototype;  //true

    原型和原型链的关系

    1、JS所有东西都是对象,函数是一种特殊的对象

    2、JS中所有的东西都是有Object衍生出来的,即所有东西原型链的重点指向Object.prototype

    3、JS对象都有一个隐藏的_proto_属性,他指向创建它的构造函数的原型,但,Object.prototype._proto_指向的是null

    4、JS中构造函数和实例之间的关系:

    // 构造函数通过定义prototype来约定其实例的规格,再通过new来构造实例,作用是产生对象
    var foo = new Foo();
    
    // 构造函数本身是方法的实例,所以可以查到他的_proto_(原型链)
    function Foo(){}  等价于   var Foo = new Function();
    
    typeof(Object);  // function  Object也是通过Function创建出来的。
    // Object的_proto_指向的是Function.prototype
    
    Function.prototype._proto_ === Object.prototype; // true  (所有东西都是对象)

     

    展开全文
  • 理解JS的原型和原型链 1.prototype 在JavaScript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象 function Student(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } ...

    理解JS的原型和原型链

    1.prototype

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

    function Student(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
    } 
    Student.prototype.sayHi = function () {
      console.log('大家好,我是' + this.name);
    }
    var s1 = new Student('lilei', 18, '男')
    s1.sayHi();//输出Student.prototype的方法
    

    当调用对象的属性或者方法的时候,先去找对象本身的属性/方法 ,如果对象没有该属性或者方法。此时去调用原型中的属性/方法

    所有引用类型(除了null)的_proto_属性指向它构造函数的prototype

     console.log(s1.__proto__ === Student.prototype);//true
    //Object.getPrototypeOf(s1)返回对象__proto__指向的prototype
    console.log(Object.getPrototypeOf(s1)===Student.prototype)//true
    

    实例之间的关系图

    的点点滴滴
    补充
    通过Object.create()创建的对象使用第一个参数作为原型
    通过对象直接量的对象使用Object.prototype作为原型
    通过new创建的对象使用构造函数的prototype属性作为原型

    2.constructor

    在原型对象中有一个属性constructor 指向该关联的构造函数

    console.log(Student.prototype.constructor===Student)//true
    s1本身没有 它是从s1.__proto__找到constructor 的
    s1.__proto__===Student.prototype
        console.log(s1.constructor === Student);//true
        var arr = [];
        console.log(arr.constructor === Array);//true
    

    3.原型的原型

    每个对象都可以有一个原型_proto_,这个原型还可以有它自己的原型,以此类推,形成一个原型链。查找特定属性的时候,我们先去这个对象里去找,如果没有的话就去它的原型对象里面去,如果还是没有的话再去向原型对象的原型对象里去寻找… 这个操作被委托在整个原型链上,这个就是我们说的原型链了。

     // Student构造函数的原型对象
    var o = s1.__proto__;
    console.log(o);// Student.prototype
    console.log(o.__proto__);//Object.prototype
    var o1 = o.__proto__;
    console.log(o1.__proto__);//null
    
    展开全文
  • js的原型和原型链是:1、原型模式是用于创建重复的对象,同时又能保证性能,这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式;2、原型链是原型对象创建过程的历史记录,当访问一个对象的某个属性...

    js的原型和原型链是:1、原型模式是用于创建重复的对象,同时又能保证性能,这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式;2、原型链是原型对象创建过程的历史记录,当访问一个对象的某个属性时,会先在这个对象本身属性上查找。

    js的原型和原型链是:

    JavaScript是一门基于原型的语言,在软件设计模式中,有一种模式叫做原型模式,JavaScript正是利用这种模式而被创建出来

    原型模式是用于创建重复的对象,同时又能保证性能,这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。这种模式是实现了一个原型接口,该接口用于创建当前对象的克隆。原型模式的目的是用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象,也就是说利用已有的一个原型对象,可以快速地生成和原型对象一样的新对象实例

    原型:一个可以被复制(或者叫克隆)的一个类,通过复制原型可以创建一个一模一样的新对象,也可以说原型就是一个模板,在设计语言中更准确的说是一个对象模板

    1)原型是定义了一些公用的属性和方法,利用原型创建出来的新对象实例会共享原型的所有属性和方法

    // 创建原型
    
     var Person = function(name){
    
         this.name = name;
    
     };
    
     // 原型的方法
    
    Person.prototype.sayHello = function(){
    
        console.log(this.name+",hello");
    
    };
    
    // 实例化创建新的原型对象,新的原型对象会共享原型的属性和方法
    
    var person1 = new Person("zhangsan");
    
    var person2 = new Person("lisi");
    
    // zhangsan,hello
    
    person1.sayHello();
    
    // lisi,hello
    
    person2.sayHello();
    

    2)严格模式下,原型的属性和方法还是会被原型实例所共享的

    // 开启严格模式,原型的属性和方法还是会被原型实例所共享的
    
    "use strict";
    
     // 创建原型
    
     var Person = function(name){
    
         this.name = name;
    
     };
    
     // 原型的方法
    
    Person.prototype.sayHello = function(){
    
        console.log(this.name+",hello");
    
    };
    
    // 实例化创建新的原型对象,新的原型对象会共享原型的属性和方法
    
    var person1 = new Person("zhangsan");
    
    var person2 = new Person("lisi");
    
    // zhangsan,hello
    
    person1.sayHello();
    
    // lisi,hello
    
    person2.sayHello();
    

    3)通过原型创建的新对象实例是相互独立的,为新对象实例添加的方法只有该实例拥有这个方法,其它实例是没有这个方法的

    // 创建原型
    
     var Person = function(name){
    
         this.name = name;
    
     };
    
     // 原型的方法
    
    Person.prototype.sayHello = function(){
    
        console.log(this.name+",hello");
    
    };
    
    // 实例化创建新的原型对象,新的原型对象会共享原型的属性和方法
    
    var person1 = new Person("zhangsan");
    
    var person2 = new Person("lisi");
    
    // zhangsan,hello
    
    person1.sayHello();
    
    // lisi,hello
    
    person2.sayHello();
    
     
    
    // 为新对象实例添加方法
    
    // 通过原型创建的新对象实例是相互独立的
    
    person1.getName = function(){
    
        console.log(this.name);
    
    }
    
    // zhangsan
    
    person1.getName();
    
    // Uncaught TypeError: person2.getName is not a function
    
    person2.getName();
    

    4)原型的总结

    所有引用类型都有一个__proto__(隐式原型)属性,属性值是一个普通的对象

    所有函数都有一个prototype(原型)属性,属性值是一个普通的对象

    所有引用类型的__proto__属性指向它构造函数的prototype

    5)函数的原型prototype:函数才有prototype,prototype是一个对象,指向了当前构造函数的引用地址

    6)函数的原型对象__proto__:所有对象都有__proto__属性, 当用构造函数实例化(new)一个对象时,会将新对象的__proto__属性指向 构造函数的prototype

    7)原型对象和函数的原型的关系在这里插入图片描述
    原型链

    说明:

    所有函数的__proto__都是指向Function的prototype

    构造函数new出来的对象__proto__指向构造函数的prototype

    非构造函数实例化出的对象或者对象的prototype的__proto__指向Object的prototype

    Object的prototype指向null

    8)所有的原型对象都会自动获得一个 constructor(构造函数)属性,这个属性(是一个指针)指向 prototype 属性所在的函数(Person)

    9)实例的构造函数属性(constructor)指向构造函数 :person1.constructor == Person

    10)原型对象(Person.prototype)是 构造函数(Person)的一个实例

    11)原型的分类:

    隐式原型(proto):上面说的这个原型是JavaScript中的内置属性[[prototype]],此属性继承自object对象,在脚本中没有标准的方式访问[[prototype]],但Firefox、Safari和Chrome在每个对象上都支持一个属性_proto_,隐式原型的作用是用来构成原型链,实现基于原型的继承

    显示原型(prototype):每一个函数在创建之后,便会拥有一个prototype属性,这个属性指向函数的原型对象,显示原型的作用是用来实现基于原型的继承与属性的共享

    12)原型的使用方式:

    通过给Calculator对象的prototype属性赋值对象字面量来设定Calculator对象的原型

    在赋值原型prototype的时候使用function立即执行的表达式来赋值,可以封装私有的function,通过return的形式暴露出简单的使用名称,以达到public/private的效果

    原型链

    1)原型链:
    原型链是原型对象创建过程的历史记录,当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的__proto__隐式原型上查找,即它的构造函数的prototype,如果还没有找到就会再在构造函数的prototype的__proto__中查找,这样一层一层向上查找就会形成一个链式结构

    2)原型设计的问题:
    当查找一个对象的属性时,JavaScript 会根据原型链向上遍历对象的原型,直到找到给定名称的属性为止,直到到达原型链的顶部仍然没有找到指定的属性,就会返回 undefined

    也可以理解为原型链继承时查找属性的过程是先查找自身属性,当自身属性不存在时,会在原型链中逐级查找

    3)hasOwnProperty 函数:
    可以用来检查对象自身是否含有某个属性,返回值是布尔值,当属性不存在时不会向上查找对象原型链,hasOwnProperty是 JavaScript 中唯一一个处理属性但是不查找原型链的函数

    4)getOwnPropertyNames 函数:
    可以获取对象所有的自身属性,返回值是由对象自身属性名称组成的数组,同样不会向上查找对象原型链

    5)原型链的小结:

    一直往上层查找,直到到null还没有找到,则返回undefined

    Object.prototype.proto === null

    所有从原型或更高级原型中的得到、执行的方法,其中的this在执行时,指向当前这个触发事件执行的对象

    6)JavaScript的原型是为了实现对象间的联系,解决构造函数无法数据共享而引入的一个属性,而原型链是一个实现对象间联系即继承的主要方法

    展开全文
  • js 原型 原型链 原型 解释: 原型是首创模型,代表同一类型人物、物件、或观念(维基百科)。那边对应到javascript 中来, 我们可以理解为:原型是对象创建之初的的模型,拥有同一类对象公有属性行为(方法)...
  • 说到js的原型和原型链网络上有许多讲解,这些讲解大多数都基于《javascript高级程序设计》里的讲解而来,虽然详细,但是也非常的冗杂,其中涉及到太多指针,引用,内存地址等相关知识。这些都是原型的必备知识,但是...
  • 对于js的原型和原型链的理解

    万次阅读 多人点赞 2019-06-23 22:20:23
    一、原型与原型链 JavaScript是一门基于原型语言,在软件设计模式中,有一种模式叫做原型模式,JavaScript正是利用这种模式而被创建出来 原型模式是用于创建重复对象,同时又能保证性能,这种类型设计模式...
  • 原型 JavaScript规定,每一个函数都有一个prototype对象属性,指向另一个对象。prototype对象属性的所有属性方法都会被构造函数...js在创建对象的时候,都有一个叫做proto的属性,用于指向它的函数对象的原型对象p...
  • 原型Js强大功能之一, 在JS面向对象编程里, 原型是必不可少知识储备 Js有五种基本类型: String, Number, Boolean, undefinednull,还有三种引用类型: Array, Object, Function 例如对于array类型, 也有...
  • 最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数  Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型...
  • 每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象用途是包含可以由特定类型所有实例共享属性方法,即原型对象。 2.在js中,每个对象都有一个__proto__属性,它也是一个指针,...

空空如也

空空如也

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

js的原型和原型链