美文网首页web前端
原型链-prototype

原型链-prototype

作者: 樊小勇 | 来源:发表于2019-04-24 21:24 被阅读7次

一、什么是原型

1.原型

1.每个object类型都有一个原型,原始的型态
2.函数的原型是 function.prototype
3.对象的原型是:

object.__proto__      也就是function的原型是function.prototype,而object的原型是object.__proto__

4.function函数new一个对象object,最终它的Object.prototype的原型是null

2. 构造函数

原型离不开构造函数,最初的构造函数的原型是null

function A(name,color) {
            this.name = name;
            this.color = color;
}
函数A的原型是   A.prototype
用构造函数A生成(new)一个对象
var B = new A();
对象B的原型是    B.__proto__
而函数A和对象B的原型是相等的
consle.log(A.prototype===__proto__);
结果是true
3. new
  • new我们经常用,无论是创建一个数字还是对象和函数都有用到
创建函数的几种方法
var  A = new function();
function A(){    }
A:function(){    }
var  A = function(){  }
  • new的本质,大致原理
    1、在函数里面创建一个对象obj
    2、将函数里面的this指向创建的那个对象obj
    3、返回这个obj对象
function F(name,age){
         var obj = {}
         this = obj
         this.name = name
         this.age = age
         return obj
        }
  • 函数、对象的原型
函数的原型    :    function.prototype
对象的原型    :   object.__proto__

二、什么是原型链

1.原型链图片
原型链
2.原型链理解
var F = function () {};
        Object.prototype.a = function () {
            console.log("aa");
        };
        Function.prototype.b = function () {
            console.log("bb");
        };
        var f = new F();
        F.a(); //aa
        F.b(); //bb
        f.a(); //aa
        // f.b(); // 抱错,f.b is not a function
function A() {
            this.name = 'a'
            this.color = ['green', 'yellow']
        }

        function B() {}
        B.prototype = new A()
        var b1 = new B()
        var b2 = new B()

        b1.name = 'change'
        b1.color.push('black')
        console.log(b1.name); // change
        console.log(b2.name) // a
        console.log(b2.color) // green yellow black

原型链诸多原型组成了一条关系链
原型链的终点止步于最后的Object类型的原型,再访问原型是null

3.用我自己开玩笑似的语言总结为

object是儿子,function是爸爸,而function.prototypr是爷爷
爸爸通过new得到了儿子,儿子和爸爸都可以访问爷爷,儿子通过proto得到爷爷的东西,爸爸通过prototype的到爷爷的东西,爷爷可以用constructor管爸爸但是管不了无法无天的儿子,爸爸也管不了这个调皮的儿子,而爷爷上面也有长辈,也是一个道理来得到长辈的东西,最后的长辈由于没有长辈了到头来只能一场空null。

三、原型链是怎么形成的

- 原型链的要素

1.函数
2.对象
3.new
4.之间存在数据传递的关系

四、原型链有什么用

  • 原型链的应用场景
    原始JS,构造函数和对象之间的联系处理一些数据
  • 原型链的作用
    可以实现继承

相关文章

  • 继承

    原型链直接继承 原型链直接继承prototype 原型链继承_prototype属性 继承_构造函数绑定

  • JavaScript再学习笔记之函数高级(1)

    原型与原型链 原型(prototype) 函数的prototype属性 每个函数都有一个prototype属性,它...

  • JS 继承

    1.原型链继承:prototype 2.原型链继承2:prototype 注意:JavaScript的类继承其实本...

  • Javascript原型链

    原型链的继承就是将子类的prototype.__proto__链接到父类的prototype,借此完成原型链 实例...

  • 原型链

    原型链函数的原型对象prototype函数都有prototype属性指向函数的原型对象【只有函数根除外】原型对象的...

  • 2018-01-08 关于javascript原型链的思考

    原型链 prototype prototype的验证几种方法 理解 prototype http://www.ru...

  • JavaScript 原型链学习

    JavaScript prototype 与 _proto_(原型链解析) prototype 概念 protot...

  • React中的 prototype

    使用prototype构建自定义对象。prototype是原型链属性,每个对象都有自己的原型链。看起来很简单,拿个...

  • 原型链

    原文出处 JavaScript深入之从原型到原型链 prototype 每个函数都有一个 prototype 属性...

  • js面向对象和面向委托的设计

    1 原型链关联的几种方式 Bar.prototype = Foo.prototype; Bar.prototype...

网友评论

    本文标题:原型链-prototype

    本文链接:https://www.haomeiwen.com/subject/jkmngqtx.html