精华内容
下载资源
问答
  • 理解原型和原型链 原型和原型链学了很久,但是一直没有完全理解,虽然现在也没用完全理解,但能勉强对付一下了 这里面先参考一下 阮大大的教程 前言 要先从继承开始讲起,根据其他语言比如java或者c++来说,他们都可以...

    理解原型和原型链

    原型和原型链学了很久,但是一直没有完全理解,虽然现在也没用完全理解,但能勉强对付一下了

    这里面先参考一下 阮大大的教程

    前言

    要先从继承开始讲起,根据其他语言比如java或者c++来说,他们都可以通过new来创建一个实例对象,然后js也出现了new的关键字,但是new后面不能跟着类,必须要跟着构造函数

    new运算符的缺点

    用构造函数生成实例对象,有一个缺点,那就是无法共享属性和方法。

    理解

    随之而来prototype属性引入

    任何一个实例对象创建之后,将自动引用prototype对象的属性和方法,例如下面

    function Dog(name){
        this.name = name
    }
    Dog.prototype.sayName = function(){ console.log(this.name) }
    var dog = new Dog('小明')
    dog.sayName()
    

    那么每一个通过Dog构造函数实例化出来的对象,都会有sayName的这个方法

    prototype

    每个对象拥有一个原型对象,对象以原型为模板,从原型集成方法和属性,这些属性和方法定义在对象的构造器函数的 prototype 属性上,而非对象实例本身,

    一个例子

    function Parent() {}
    var p = new Parent();
    p.__proto__ === Parent.prototype
    

    这里用 p.proto 获取对象的原型,proto 是每个实例上都有的属性,prototype 是构造函数的属性,这两个并不一样,但 p.proto 和 Parent.prototype 指向同一个对象。

    总结

    1. prototype和__proto__的区别,prototype是构造函数上面的属性,而__proto__是实例出来的对象的属性,这两个并不一样,但 p.proto 和 Parent.prototype 指向同一个对象

    2. 再说的俗一些 _proto_里是js内置的,prototype是你自己写的。比如当我们去创建一个 var obj = {} 的时候,他会默认就有 obj.toString() 这个方法,这就是__ptoto__的方式,而如果我们想增加,就在他的原型构造函数上面添加 prototpye

    3. 原型链: 每个对象都有一个原型对象,通过__proto__指针指向上一个原型,并从中继承方法和属性,同时原型对象也有原型,那么一层一层可以找下去,直到null,这种关系我们称之为原型链

    4. 原型: JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。

    展开全文
  • 原型 对象原型怎样共享构造函数方法的? 因为属性是简单数据类型实例对象可以直接使用,而函数是复杂数据类型,需要开辟内存空间,才能调用,当有多个...对象原型(proto)和原型对象(prototype)里面都有一个属性cons

    原型

    对象原型怎样共享构造函数方法的?

    因为属性是简单数据类型实例对象可以直接使用,而函数是复杂数据类型,需要开辟内存空间,才能调用,当有多个实例对象的时候就会开辟多个一样的函数,这样就造成了内存的浪费。通过原型对象能够让所有实例共享这些方法。

    prototype是构造函数的内置属性,其中存放了一个对象,称其为原型对象
    __proto__是实例对象的内置属性,称之为对象原型
    
    具体思路图解如下:

    在这里插入图片描述

    构造器:constructor

    对象原型(proto)和原型对象(prototype)里面都有一个属性constructor,指回构造函数。但当我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数。

    代码如下:

    function Am(ID,name){
            this.ID = ID;
            this.name = name;
           }
           Am.prototype.foo = function(){
               console.log('我是原型对象函数1');
           },
           Am.prototype.foo1 = function(){
            console.log('我是原型对象函数2');
    
           }
           var xiaoming = new Am(01,'小明')
           console.log(xiaoming.foo1)
    

    此时,prototype仍然是指向Am构造函数,但代码结构可以做优化。

     function Am(ID, name) {
                this.ID = ID;
                this.name = name;
            }
            Am.prototype = {
                constructor:Am,//手动设置指回原来的构造函数
                foo: function () {
                    console.log('我是原型对象函数1');
                },
                foo1: function () {
                    console.log('我是原型对象函数2');
                }
            }
            var xiaoming = new Am(01, '小明')
            console.log(xiaoming.constructor)
    

    原型链

    任何对象都有原型对象,也就是prototype属性,任何原型对象也是一个对象,该对象有proto属性,这样一层一层往上查找,就形成了一条原型链。如下图:

    在这里插入图片描述

    ·【注】数组和字符串内置对象不能给原型对象进行覆盖操作,不能改变原型对象的prototype指向。

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

    2019-05-10 09:58:43
    补充原型知识点: 以这个代码为例延伸知识点: function Person() {} Person.prototype.name = ‘Zaxlct’; Person.prototype.age = 28; Person.prototype.job = ‘Software Engineer’; Person.prototype.sayName =...

    补充原型知识点:
    以这个代码为例延伸知识点:

     function Person() {}
     	Person.prototype.name = 'Zaxlct';
    	 Person.prototype.age  = 28;
     	Person.prototype.job  = 'Software Engineer';
     	Person.prototype.sayName = function() {
       	alert(this.name);
     }
     var person1 = new Person();
     person1.sayName(); // 'Zaxlct'
    
     var person2 = new Person();
     person2.sayName(); // 'Zaxlct'
    
     console.log(person1.sayName == person2.sayName); //true
    

    1、每个对象都有 proto 属性,但只有函数对象才有 prototype 属性
    2、原型对象就是 Person.prototype,在默认情况下,所有的原型对象都会自动获得一个 constructor(构造函数)属性,这个属性(是一个指针)指向 prototype 属性所在的函数(Person),翻译一下就是(Person.prototype)有一个默认的constructor属性,这个属性是一个指针,指向Person这个函数,即:Person.prototype.constructor == Person
    3、上例中person1和person2又是由Person实例化出的对象,而实例的构造函数的constructor属性也是指向Person函数,即:person1.constructor == Person
    4、根据:
    Person.prototype.constructor == Person
    person1.constructor == Person。
    结论:原型对象(Person.prototype)是 构造函数(Person)的一个实例。
    5、原型对象其实就是普通对象(但 Function.prototype 除外,它是函数对象,但它很特殊,他没有prototype属性(前面说道函数对象都有prototype属性))

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

    6、实例的构造函数属性(constructor)指向构造函数。
    7、特例;console.log(typeof Function.prototype) 输出是function 也就是说Function.prototype是函数对象(第5点提到)。那么关于这个函数对象的有—>Function.prototype.proto === Object.prototype 和 Person.prototype.proto === Object.prototype,疑问的是:一个普通对象的构造函数是Object,那么第一个等式什么意思?
    8、原型链的顶端是null—> Object.prototype.proto === null
    9、自行解答问题:

     person1.__proto__ 是什么?
     Person.__proto__ 是什么?
     Person.prototype.__proto__ 是什么?
     Object.__proto__ 是什么?
     Object.prototype__proto__ 是什么?
         
     //例题
     function Person(){}
     var person1 = new Person();
     console.log(person1.__proto__ === Person.prototype); // true
     console.log(Person.prototype.__proto__ === Object.prototype) //true
     console.log(Object.prototype.__proto__) //null
    
     Person.__proto__ == Function.prototype; //true
     console.log(Function.prototype)// function(){} (空函数)
    
     var num = new Array()
     console.log(num.__proto__ == Array.prototype) // true
     console.log( Array.prototype.__proto__ == Object.prototype) // true
     console.log(Array.prototype) // [] (空数组)
     console.log(Object.prototype.__proto__) //null
    
     console.log(Array.__proto__ == Function.prototype)// true
    

    题目:实现 (5).add(3).minus(2) 功能

    Number.prototype.add = function(n) {
      return this.valueOf() + n;
    };
    Number.prototype.minus = function(n) {
      return this.valueOf() - n;
    };
    //这题就考了原型对象的使用,函数里面的this指向Number中原型对象的方法,add就是新添方法
    

    附图理解:
    在这里插入图片描述

    废话不多说,附上一段大图滚动的简单原型使用的代码:

    (function(exports) {
         function roll(obj) {
             this.$box = document.getElementById(obj.parID) || document.getElementById("wrap");
             this.$con = document.getElementById(obj.rollID) || document.getElementById('con');
             this.$imgs = this.$con.children;
             this.startVal = this.$box.scrollLeft;
             this.times = null; //计时器23        
               this.imgNum = 0;
             this.rollNum = obj.rollNum || 1;//滚动图片的个数,默认为1(只能是偶数)25        
               this.speed = obj.speed || 7;//滚动的速度,默认为726        
               this.width = obj.width || 400;//滚动的距离,默认为40027        
               this.stopTime = obj.stopTime || 2000;//停止的时间28        
               this.init();
         };
      roll.prototype = {
         constructor: "roll", //署名constructor属性的指向
    
         init: function() {
             var _this = this;
             setTimeout(function() {
                 _this.imgSco();
             }, this.stopTime);
         },
    
         imgSco: function() {
             this.imgNum += this.rollNum;
             if (this.imgNum >= this.$imgs.length) {
                 if (this.imgNum == this.$imgs.length - 1) {
                     this.imgNum++;
                 } else {
                     this.imgNum = 0;
                 }
             }
             this.startMove(this.imgNum * this.width);
         },
    
         startMove: function(moveL) {
             var _this = this;
             var moveL = moveL;
             this.times = setInterval(function() {
                 _this.timeMove(moveL);
             }, 10); 
         },
    
         timeMove: function(moveL) {
             var _this = this;
             if (this.startVal < moveL) {
                 this.startVal += this.speed;
                 if (this.startVal >= moveL) {
                     this.startVal = moveL;
                     setTimeout(function() {
                       _this.imgSco(); 
                     }, this.stopTime);
                     clearInterval(this.times);
                 }
             } else if (this.startVal > moveL) {
                this.startVal -= this.speed;
                 if (this.startVal<= moveL) {
                     this.startVal = moveL;
                     setTimeout(function() {
                       _this.imgSco(); 
                     }, this.stopTime);
                     clearInterval(this.times);
                 }
             }
             this.$box.scrollLeft = this.startVal;
         }
     }
     exports.roll = roll; })(window)
    
    展开全文
  • 好多人不理解原型就是不理解这到底是什么东西(我就是), 看完本篇文章应该可以理解个大概 原型是Js强大的功能之一, 在JS面向对象编程里, 原型是必不可少的知识储备 Js有五种基本类型: String, Number, Boolean, ...

    好多人不理解原型就是不理解这到底是什么东西(我就是), 看完本篇文章应该可以理解个大概

    原型是Js强大的功能之一, 在JS面向对象编程里, 原型是必不可少的知识储备

    Js有五种基本类型: String, Number, Boolean, undefined和null, 还有三种引用类型: Array, Object, Function

     

    例如对于array类型, 也有join, reverse, pop, shift等方法供我们调用 

     

    let arr = [];

    空空的数组,可是为什么会有方法供我们调用呢?  (这应该是很多人理解原型的切入点)

    每一个Js对象创建时都会从相应的原型继承基本的方法, 说白了就是其实我们使用的对象自带的方法保存在一个(或多个)对象里面, 这个对象就是原型

    函数有prototype属性和原型连接, 对象有[[proto]]属性(这不是一个标准方法, 但几乎每一个浏览器都提供一个__proto__来模拟)和原型连接, 并且和构造函数连接的原型是一个对象.

    以下在浏览器console里面运行:

    function test() {}
    var test1 = new test();
    test.prototype === test1.__proto__
    // 结果是true

     

    一直说的基于原型链的面向对象编程, 就是js的原型不是一成不变的, 我们可以通过这样的代码改变原型:

    function test() {}
    test.prototype = new function()

    如果需要共享的方法, 把它定义在new的function里面就可以了

    还有:

    let obj = new Object(null);

    这段Js代码会创建一个obj对象, 但是这个对象却继承于null, 所以,不会有任何内置方法, 就连最基础的tostring也没有

     

    转载于:https://www.cnblogs.com/jedenzhan/p/8728422.html

    展开全文
  • 一、js中的两种对象,普通对象函数对象 var obj1 = {}; var obj2 =new Object(); var obj3 = new obj1(); function fun1(){}; var fun2 = function(){}; var fun3 = new Function('str','console.log...
  • 一.对象:普通对象 函数对象 二.构造函数特点:1....原型和原型链是JS实现继承的一种模型。 原型链的形成是真正是靠 __proto__ 而非 prototype 转载于:https://www.cnblogs.com/bais/p/9068928.html
  • 1、大写的Function创建俩个实例化的构造函数ObjectPerson。 2、Object创建{ }对象,Person创建Person对象。 3、大写的Function的prototype对象属性_proto_都指向Function.prototype;ObjectPerson的_proto_...
  • 理解继承,首先要搞懂什么是原型和原型链理解原型和原型链 上面已经介绍了关于原型的两个属性: __proto__ prototype 那么这里再小小总结一下, 1、什么是原型 原型即一个对象的构造器(prototype),可以通过该...
  • 前言本文将从上帝角度讲解JS的世界,在这个过程中,大家就能完全理解JS的原型和原型链是什么,之后还会基于原型和原型链知识拓展一些相关知识。阅读本文前可以思考下面三个问题:你理解中的原型和原型链是什么?你能...
  • 一个例子让你彻底明白原型对象和原型链 开篇 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂...
  • 同时,如果我们能很好的理解JS中的原型和原型链,对于控制台输出的很多信息我们也能更好的理解,而原型链也是实现继承的主要方法。所以理解JS中的原型和原型链就显得很有必要了。1.理解原型首先,我们创建的每个函数...
  • 总括: 结合实例阐述了原型和原型链的概念并总结了几种创建对象的方法,扩展原型链的方法。参考文章:The Secret Life of Objects,继承与原型链禄无常家,福无家门。正文原型Javascript中有一句话,叫一切皆是对象,...
  • 但是由于其没有 类(class,ES6 引入了 class,但其只是语法糖)的概念,如何将所有对象联系起来就成立一个问题,于是就有了原型和原型链的概念。每个实例对象( object )都有一个私有属性(称之为 __proto__ )...
  • 来源 | http://cavszhouyou.top/写在前面原型和原型链一直都是 JavaScript 中很重要的概念,理解它们有助于我们理解预定义引用类型间的关系以及 JavaScript 中对象继承的实现机制,下面是我对原型和原型链理解和...
  • 理解原型和原型链

    2019-04-24 08:14:41
    第一篇:什么是原型和原型链 为什么要讨论原型和原型链? Javascript的数据类型分为基本数据类型(String、Number、Boolean 、Undefined、Null、Symbol)和引用数据类型,除了基本数据类型外...
  • 原型和原型链是我们在面试中必会提问到的一个问题,理解原型和原型链不管对学习还是工作都会得到帮助,希望这篇文章会帮助你理解原型和原型链。 一、原型对象 原型对象分为两种,隐式原型(proto)和显式原型...
  • 原型和原型链是Javascript核心概念中很重要的一部分,同样也是很难理解透的一部分,相信很多小伙伴都一样,特别是对于刚学习的js人来说,应该更头晕了,对于我自己来说,目前也只是理解了大概,下面把自己的认识分享...
  • 一个例子让你彻底明白原型对象和原型链 1. 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的...
  • 原型和原型链是js中的基本概念。下面我们了解一下原型的基本用法。首先定义三个对象,然后判断x、y、z是否可以通过a对象访问。代码如下:let a ={ x:'x'}let b ={ y:'y'}let c ={ z:'z'}console.log('x' in a)...
  • 今天将延续这篇文章,借助一个老朋友——instanceof运算符,将通过它以及结合多次讲的原型/原型链经典图来深入理解原型/原型链。对于原始类型(primitive type)的值,即string/number/boolean,你可以通过typeof...
  • //每日前端夜话第364篇//本文转自公众号:前端日志//正文共:2500 字//预计阅读时间:10分钟...理解原型链深入原型链总结与思考理解原型链Js 中的原型链是一个比较有意思的话题,它采用了一套巧妙的方法,解决了 J...
  • 原型和原型链理解

    千次阅读 多人点赞 2019-09-09 09:39:47
    原型和原型链理解:(面试题) 原型:每个函数都有 prototype 属性,该属性指向原型对象;使用原型对象的好处是所有对象实例共享它所包含的属性和方法。 原型链:主要解决了继承的问题;每个对象都拥有一个原型对象...
  • Object.prototype 原型和原型链原型Javascript中所有的对象都是Object的实例,并继承Object.prototype的属性和方法,有些属性是隐藏的。换句话说,在对象创建时会存在预定义的属性,其中有一个属性就是原型对象。在...

空空如也

空空如也

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

原型和原型链理解