美文网首页JavaScript
JavaScript原型和原型链

JavaScript原型和原型链

作者: Leophen | 来源:发表于2019-05-12 18:03 被阅读0次

一、函数对象

  1. 所有引用类型(函数、数组、对象)都拥有__ proto __属性(隐式原型)
  2. 所有函数拥有prototype属性(显式原型)(仅限函数)
  3. 原型对象:拥有prototype属性的对象,在定义函数时就被创建

二、构造函数

//创建构造函数
function demo(name){
    this.name= name;
}
demo.prototype = {
    alert(){
        alert(this.name);
    }
}
//创建实例
var a = new demo("ming");
a.print = function(){
    console.log(this.name);
    console.log(this);  //Person对象
}
a.print();  //ming
a.alert();  //ming
  • print()方法是a实例本身具有的方法,所以a.print()打印ming;alert()不属于a实例的方法,属于构造函数的方法,a.alert()也会打印ming,因为实例继承构造函数的方法。

  • 实例a的隐式原型指向它构造函数的显式原型,指向的意思是恒等于

a.__proto__ === demo.prototype
  • 当调用某种方法或查找某种属性时,首先会在自身调用和查找,如果自身并没有该属性或方法,则会去它的__ proto __属性中调用查找,也就是它构造函数的prototype中调用查找。

三、原型和原型链

Function.prototype.a = "a";
Object.prototype.b = "b";
function Person(){}
console.log(Person);    //function Person()
let p = new Person();
console.log(p);         //Person {} 对象
console.log(p.a);       //undefined
console.log(p.b);       //b

由于p是Person()的实例,是一个Person对象,它拥有一个属性值 __ proto __ ,并且__ proto __ 是一个对象,包含两个属性值constructor和 __ proto __

console.log(p.__proto__.constructor);   //function Person(){}
console.log(p.__proto__.__proto__);     //对象{},拥有很多属性值

p.__ proto __ .constructor返回的结果为构造函数本身,p.__ proto . proto __有很多参数

console.log(p.__proto__.__proto__)

我们调用constructor属性,p. __ proto . proto __.constructor得到拥有多个参数的Object()函数,Person.prototype的隐式原型的constructor指向Object(),即Person.prototype. __ proto __.constructor == Object()

p.__ proto __.constructor返回的结果为构造函数本身得到Person.prototype.constructor == Person()所以p. __ proto . proto __== Object.prototype

所以p.b打印结果为b,p没有b属性,会一直通过__ proto __向上查找,最后当查找到Object.prototype时找到,最后打印出b,向上查找过程中,得到的是Object.prototype,而不是Function.prototype,找不到a属性,所以结果为undefined,这就是原型链,通过 __ proto __向上进行查找,最终到null结束

console.log(p.__proto__.__proto__.__proto__);   //null
console.log(Object.prototype.__proto__);        //null

同理,得出以下结果

//Function
function Function(){}
console.log(Function);  //Function()
console.log(Function.prototype.constructor);    //Function()
console.log(Function.prototype.__proto__);      //Object.prototype
console.log(Function.prototype.__proto__.__proto__);    //NULL
console.log(Function.prototype.__proto__.constructor);  //Object()
console.log(Function.prototype.__proto__ === Object.prototype); //true

四、总结:

  1. 凡是通过 new function() 创建的对象都是函数对象,其他的都是普通对象
  2. js 中所有的函数对象都有一个 prototype 属性,这个属性引用了一个对象,
    即原型对象,也简称原型。普通对象没有 prototype,但有__ proto __属性
  3. js 在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做
    __ proto __的内置属性,用于指向创建它的函数对象的原型对象 prototype(即它
    的构造函数的原型对象)
总结

相关文章

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • 原型和原型链篇

    原型和原型链 1.理解原型设计模式以及JavaScript中的原型规则 原型设计模式JavaScript是一种基于...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

  • js原型、原型链、继承的理解

    一、原型、原型链 原型是Javascript中的继承的基础,JavaScript的继承主要依靠原型链来实现的。 原...

  • 【javascript】继承

    javascript只支持实现继承,而且继承主要是依靠原型链来实现的。 原型链 javascript将原型链作为实...

  • 4.4 JavaScript

    4.4.1. 原型链 4.4.1.1. 显式原型和隐式原型   JavaScript的原型分为显式原型(expli...

  • 关于JS中的原型和原型链

    目录 关于js 对象和原型 原型链 基于原型链的继承 参考资料ECMAScript 6 入门JavaScript原...

  • javascript碎片知识001

    javascript中的对象(原型,原型链) 什么是原型? 原型是JavaScript中的继承的基础,JavaSc...

  • JS进阶(1) —— 人人都能懂的构造函数

    大家都知道原型和原型链是 JavaScript 中最经典的问题之一,而构造函数又是原型和原型链的基础,所以先了解清...

  • JavaScript原型对象与原型链

    一、前言 原型和原型链是 JavaScript中不可避免需要碰到的知识点,在刚开始学习 JS 时,原型和原型链都是...

网友评论

    本文标题:JavaScript原型和原型链

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