原型链

作者: 哈斯勒 | 来源:发表于2019-12-19 11:13 被阅读0次

构造函数执行流程:

  1. 立刻创建一个新的对象

  2. 将新建的对象设置为函数中的this, 在构造函数中,可以使用this来引用新建的对象

  3. 逐行执行函数中的代码, 将新建的对象作为返回值返回

    使用同一个构造函数创建的对象称为一类对象,也将一个构造函数称为一个类
    通过构造函数创建的对象称为该类的一个实例




function Person(name, age){
      this.name = name;
      this.age = age;

//如果在构造函数内部创建方法,创建类的实例时,构造函数每执行一次,就会创建一个新的sayname方法
//也即所有实例的sayName都是唯一的造成了资源浪费
      this.sayName = function(){
          console.log('this.name');
    }
}


var per = new Person();
console.log(per instance of Person);//检查一个对象是否是一个类的实例



每创建一个函数,解析器都会向函数中添加一个属性prototype, 包括普通函数和构造函数
这个prototype属性指向一个对象,也即所称的原型对象
如果函数作为普通函数调用,prototype没有任何作用
当函数以构造函数调用时,它所创建的对象都会有一个隐含的属性,指向该构造函数的原型对象,可以通过proto访问该属性
原型对象相当于一个公共的区域,多有同一个类的额实例都可以访问到这个原型对象
因此可以将对象中共有的内容,统一设置到原型对象中
当访问一个对象的属性或方法时,会先在对象自身中寻找,如果有则直接使用
如果没有,则会去原型对象中寻找,如果找到则直接使用,也有可能去原型的原型中寻找,一直到object的原型为止(object的原型没有原型),如果没有找到,则返回undefined

Person.prototype.sayHello = function(){
    alert('hello');
};
per.sayHello();

实例成员,只能由实例化的对象来访问
静态成员,只能由构造函数本身来访问
实例化对象的proto指向构造函数的prototype属性指向的对象,实例化的对象可以访问到它后者身上的成员

#静态成员, 只有构造函数才可以访问
Person.country = 'China'
#原型上添加变量,其实例都可以访问到
Person.prototype.address = 'a'

console.log(per.address)
console.log('address' in per) // 使用in检查对象中是否含有某个属性,如果对象没有,原型中有,也会返回true
console.log(per.hasOwnProperty('name')) //检查自身是否含有某属性

构造函数和原型对象相互引用 (隐式原型:per.proto.constructor === Person 显示原型: Person.prototype.constructor === Person )

每一个函数都有一个属性prototype,指向原型对象object

原型对象都有一个constructor属性,指向函数对象

给实例对象添加属性,一般是方法,这样实例对象都可以访问

       # 所有实例对象的隐式原型都指向构造函数的显示原型
       function Person() {

        }

        var per = new Person();

        Person.prototype.say = function () {
            console.log('test');
        }
        console.log(per);
        console.log(per.__proto__);
        console.log(per.__proto__.constructor === Person);

函数的显式原型prototype属性,在定义函数时自动添加的,默认值是一个空Object

实例对象的隐式原型proto属性,创建对象自动添加的,默认值为构造函数的prototype属性值

在ES6之前,只能操作显式原型,不能直接操作隐式原型

因此将构造函数方法添加在prototype上

每个函数都是Function的实例,因此每个函数也都有一个隐式属性proto , 指向Function的原型对象

函数的显式原型prototype指向Object

​ 隐式原型proto指向 Function的原型对象

Function的显式原型prototype 指向Function的原型对象

​ 隐式原型proto

 function Person() {

 }
 等价于
 
 var Person = new Function(){
 
 }
  所以所有函数的隐式原型都是一样的,指向Function 的原型对象
 
函数的显式原型指向的对象默认是空Object实例对象
Fn.prototype instanceof Object true
Object.prototype istanceof Object false
Function.prototype instanceof Object true

所有函数都是Function的实例,包括Function
Function.__proto === Function.prototype

Object的原型对象是原型链的尽头
Object.prototype.__proto__ null
image.png image.png
看是否含有某属性和方法,其本质就是查找原型链
A instanceof B
如果B函数的显式原型对象在A对象的原型链上,则返回true,否则false

相关文章

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

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

  • 原型、原型链

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

  • 原型链&查找规则&作用域链

    原型链(隐式原型链) 属性的查找规则(原型链的查找规则) 作用域链

  • 关于原型原型链的理解

    什么是原型? 什么是原型链? 为什么需要原型,和原型链?

  • 原型链实现继承

    原型链 原型链示意图 使用原型链实现继承 这是怎么回事呢? 原型链在哪? 听我细细道来~ 首先 Teacher 实...

  • 继承

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

  • js中的实现继承的几种方式

    大纲:原型链借用构造函数组合继承原型式继承寄生式继承寄生组合式继承 1、原型链: 什么是原型链? 原型链的基本思想...

  • 【原型和原型链】什么是原型和原型链

    【原型和原型链】什么是原型和原型链https://blog.csdn.net/xiaoermingn/articl...

  • js原型链

    目录 1.对象的原型和原型链1.1什么是原型1.2查看原型1.3对象的原型链 2.使用构造函数2.1 函数的原型链...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

网友评论

      本文标题:原型链

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