JS-原型链

首先我们需要牢记两点：

①_ _proto _和constructor属性是对象所独有的；
② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有 _proto __和constructor属性。

函数的prototype属性指向 函数的原型对象
对象的_ _proto __属性指向 原型对象
对象的constructor属性指向 该对象的构造函数

_ _proto __属性的作用就是 当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的_ _proto _属性所指向的那个对象（父对象）里找，一直找，直到proto属性的终点null，再往上找就相当于在null上取值，会报错。通过 _proto __属性将对象连接起来的这条链路即我们所谓的原型链。

prototype属性的作用就是 让该函数所实例化的对象们都可以找到公用的属性和方法，即f1.proto === Foo.prototype。

constructor属性的含义就是 指向该对象的构造函数，所有函数（此时看成对象了）最终的构造函数都指向Function。

image.png

原文链接：https://blog.csdn.net/cc18868876837/article/details/81211729

1.基础知识

1.对数组，对象而言，都存在一个_ _proto _的私有属性，称之为原型，可为数组或对象附加更多的能力
2.对数组而言， _proto _依次上溯到Array ,Object;
对对象而言， _proto __只上溯到Object
3.可使用Object.getPrototypeOf()或proto获取当前成员的原型,使用hasOwnProperty()检测原型成员
4.可使用Object.create(null)创建无原型的对象(极少使用，完全字面量对象)，不可使用hasOwnProperty()检测原型成员

    const nums = [1, 2, 3, 4, 5]
    const user = { name: 'xiaoming' }
    console.log(nums)
    console.log(user)
    console.log(nums.__proto__)
    console.log(user.__proto__)
    console.log(Object.getPrototypeOf(nums)) //获取nums的当前成员原型
    console.log(Object.getPrototypeOf(user)) //getPrototypeOf获取当前成员的原型
    console.log(user.hasOwnProperty('name'))         // true

2.原型方法

  • 对象包含属性和方法，同时也继承其原型(_ _proto __)上的成员

  • 如果对象和其原型同时拥有相同的成员，优先使用对象自身的成员


    image.png

3.函数原型

1.函数原型
  • 在js中函数也是对象，除拥有函数专属的prototype属性外，还存在_ _proto _ _属性
  • 函数的本质其实也是对象，_ _proto _ _和prototype也都是对象
  • 通常将实例方法定义在prototype上，实例的_ _ proto _ _指向类的类型prototype
  • 可在_ _ proto _ _定义"类方法"(不推荐)，适用于将函数当对象使用时的场景
    image.png
image.png
2.函数原型的constructor

4.对象原型

  • 对象的原型默认指向Object
  • 可以使用Object.getPrototypeOf查看对象的原型
  • this本身和原型是没有关联的，只会指向调用函数本身的对象

5.类型检测

  • 可使用instanceof检测当前对象是否为指定的类型，如果原型发生改变形成‘继承’关系，则子实例也是其父类或祖先类的类型
  • 可使用isPrototypeOf检测当前对象是否为指定类型的原型，类型检测会按原型链依次上溯直到Object为止
  • 可结合in和hasOwnProperty来检测当前对象是否包含指定的属性，in将检测所有属性（含原型），hasOwnProperty仅检测自有属性。
 // instanceof
    function Child() {}
    function Parent() {}
    function Grandpa() {}
    // 修改原型
    const g = new Grandpa()
    Parent.prototype = g
    const p = new Parent()
    Child.prototype = p
    const c = new Child()
    console.log(c instanceof Child)   // true
    console.log(c instanceof Parent)  // true
    console.log(c instanceof Grandpa) // true
    console.log(p instanceof Parent)  // true
    console.log(p instanceof Grandpa) // true
    console.log(g instanceof Grandpa) // true
    // isPrototypeOf
    const member = {}
    const admin = {}
    const user = {}
    console.log(admin.isPrototypeOf(member))                // false
    console.log(admin.__proto__.isPrototypeOf(member))      // true
    console.log(admin.__proto__ === Object.prototype)       // true
    Object.setPrototypeOf(member, admin)
    console.log(admin.isPrototypeOf(member))                // true
    Object.setPrototypeOf(admin, user)
    console.log(user.isPrototypeOf(admin))                  // true
    console.log(user.isPrototypeOf(member))                 // true
   // in & hasOwnProperty
    const a = { name: 'xiaoming' }
    const b = { url: 'baidu.com' }
    console.log('name' in a)                                // true
    console.log('url' in a)                                 // false
    Object.setPrototypeOf(a, b)
    console.log('name' in a)                                // true
    console.log('url' in a)                                 // true
    console.log(a.hasOwnProperty('name'))                   // true
    console.log(a.hasOwnProperty('url'))                    // false
    // 遍历属性
    for(const key in a) {
      console.log(`in: ${key}`)
      if(a.hasOwnProperty(key)) {
        console.log(`hasOwnProperty: ${key}`)
      }
    }

6.方法借用

+通过call()、apply()和bind()方法，我们可轻易地借用其它对象的方法，而无须从这些对象中继承它。

  • 有时候在对象中实现某个功能，虽然自身不存在，但可“借用”别的对象中已有的方法
  • 对DOM节点的操作经常会“借用”数组的某些函数来达到需求
const obj = {
   nums: [1, 2, 3, 4, 5]
}
Object.setPrototypeOf(obj, {
   max(nums) {
       nums = nums || this.nums
       return nums.sort(function (a, b) { return b - a })[0]
   }
})
console.log(obj.max())

//Dom节点筛选
const btns = document.querySelectorAll('button')
//btns类数组借用数组的filter且将参数item=>item.hasAttribute('class')作为filter的回调
const filterBtns = Array.prototype.filter.call(btns, item => item.hasAttribute('class'))
/**使用字面量借用方法 字面量是一种遵循JavaScript规则的语法结构，MDN 这样解释：
在JavaScript中，使用字面量可以代表值。它们是固定值，不是变量，就是在脚本中按字面给出的。
字面量可以简写原型方法：
*/
const filterBtns = [].filter.call(btns, item => item.hasAttribute('class'))

7.深度认识_ _ proto _ _

https://blog.csdn.net/cc18868876837/article/details/81211729

8.原型继承（7种方式）

方式1：原型链继承（不推荐）

缺点：
无法向父类构造函数传参
父类的所有属性被共享，只要一个实例修改了属性，其他所有的子类示例都会被影响

//构造函数
function Person(age) {
    this.age = age || 18
}
Person.prototype.sleep = function () {
    console.log('sleeping')
}
//=======================================
function Programmer() { }
Programmer.prototype = new Person()
Programmer.prototype.code = function () {
    console.log('编程人会coding')
}

let xiaoming = new Programmer()
xiaoming.code()
xiaoming.sleep()
console.log(xiaoming.age)

console.log(xiaoming instanceof Person)
console.log(xiaoming instanceof Programmer)

console.dir(Object.getPrototypeOf(xiaoming))
console.dir(xiaoming.__proto__)
方式 2：借用构造函数（经典继承）（不推荐）

优点：

  • 可以为父类传参
  • 避免了共享属性

缺点：

  • 只是子类的实例，不是父类的实例
  • 方法都在构造函数中定义，每次创建实例都会创建一遍方法
//构造函数
function Person(age) {
    this.age = age || 18
}
Person.prototype.sleep = function () {
    console.log('sleeping')
}
//==============================
function Programmer(name){
    Person.call(this)
    this.name=name
    this.code=function(){
        console.log('codecodecode')
    }
}
let xiaoming=new Programmer('xiaoming')
console.log(`${xiaoming.name}      ${xiaoming.age}`)
//方法都在构造函数中定义，每次创建实例都会创建一遍方法
xiaoming.code() 
console.log(xiaoming instanceof Programmer)
// false 只是子类的实例，不是父类的实例
console.log(xiaoming instanceof Person)
//只是子类的实例，不是父类的实例
xiaoming.sleep()  //Uncaught TypeError:xiaoming.sleep is not a function
3.组合继承（推荐）

组合 原型链继承 和 借用构造函数继承
优点：

  • 可以为父类传参
  • 方法都在构造函数中定义，每次创建实例都会直接继承方法
    缺点：
  • 调用了两次父类构造函数
//构造函数
function Person(age) {
   this.age = age || 18
}
Person.prototype.sleep = function () {
   console.log('sleeping')
}
//==============================

function Programmer(age, name) {
   Person.call(this, age)
   this.name = name
}
Programmer.prototype = new Person()
//通过Programmer.prototype.constructor=Programmer 修正constructor指向，不加此句programmer的构造函//数是Person的 ？？
Programmer.prototype.constructor = Programmer  

let xiaoming = new Programmer(10, 'xiaoming')
console.log(`${xiaoming.age}   ${xiaoming.age}   ${xiaoming.sleep}`)
xiaoming.sleep()
let zhangsanfeng = new Programmer(100, 'zhangsanfeng')
console.log(`${zhangsanfeng.age}   ${zhangsanfeng.age}   ${zhangsanfeng.sleep}`)
zhangsanfeng.sleep()

console.log(`${xiaoming instanceof Programmer}   ${xiaoming instanceof Person}`)

4.原型式继承 （不推荐）

原型 prototype共享了属性和方法
一个实例修改了原型上的方法，其他都会被影响

function create(o) {
    function F() { }
    F.prototype = o
    return new F()
}

let obj = { gift: ['switch', 'Mini'] }

let gift1 = create(obj)
console.log(gift1.gift)

let gift2 = create(obj)
console.log(gift2.gift)
gift2.gift.push('xxx')
//只在gift2中新增了一个 gift1中也有了变化
console.log(gift2.gift)

console.log(gift1.gift)
image.png

5. 寄生式继承（不推荐）

创建一个仅用于仅用于封装继承过程的函数，该函数在内部以某种形式来做增强对象，最后返回对象。
缺点：
跟借用构造函数一样，每次创建对象都要创建一次方法

function createObj(o) {
    //通过Object.create()实现继承的顺序至关重要，必须保证定义原型方法或新建对象在Object.create()之后进行
    const clone = Object.create(o)
    //创建了一个对象，增强对象
    clone.sayName = function () {
        console.log('hi')
    }
    return clone
}

6.寄生组合继承（最佳）

子类构造函数继承父类自身的属性和方法，子类原型继承父类原型的属性和方法

function Person(age) {
    this.age = age || 18
}
Person.prototype.sleep = function () {
    console.log('sleeping')
}

function Programmer(age, name) {
    Person.call(this)  //子类构造函数复制父类的自身属性和方法 
    this.name = name
}

Programmer.prototype = Object.create(Person.prototype) //子类原型接受父类的原型属性和方法

Programmer.prototype.constructor = Programmer //修复Programmer的构造函数指向 

let xiaoming = new Programmer(16, '小名')
console.log(xiaoming.name)

7：ES6 extends（最佳）

//父类 
class Father {
    constructor(age) {
        this.age = age
    }
    sleep() {
        console.log('sleeping')
    }
}

class Children extends Father {
    constructor(age, name) {
        super(age)
        this.name = name
    }
    code() {
        console.log('coding')
    }
}
let bo = new Children(20, '伯')
let zhong = new Children(18, '仲')
console.log(`${bo.name}  ${zhong.name}`)
console.log(`${bo instanceof Children}  ${bo instanceof Father}`)
console.log(`${zhong instanceof Children}  ${zhong instanceof Father}`)
console.log(bo.prototype === zhong.prototype)
image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,922评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,591评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,546评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,467评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,553评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,580评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,588评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,334评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,780评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,925评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,573评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2赞 352