美文网首页让前端飞
理解 JavaScript 原型 / 原型链

理解 JavaScript 原型 / 原型链

作者: passMaker | 来源:发表于2018-08-27 16:30 被阅读9次

关于对象

以下代码中 p 的值是一个新对象,里面拥有 nameage 属性

function People(name, age){
    this.name = name
    this.age = age
}
var p = new People('evenyao', 27)

下面代码得到的结果同理,因为 return 的是一个 “非对象”

function People(name, age){
    this.name = name
    this.age = age
    return 'hello'
}
var p = new People('evenyao', 27)



如果是下面代码, p 的值为一个新对象,里面拥有 ab 属性

function People(name, age){
    this.name = name
    this.age = age
    return {a: 1, b: 2}
}
var p = new People('evenyao', 27)

new

function Modal(msg){
    this.msg = msg
}
var modal = new Modal()

以上代码的执行过程如下:

  • new一个函数的时候,首先创建一个空的对象 {},把一个空的对象的 proto 属性设置为 Modal.prototype 。
  • 然后初始化实例,函数 Modal 被传入参数并调用,关键字 this 被设定为该实例。
  • 返回实例, 赋值给 modal。

instanceof

instanceof 是一个操作符,可以判断对象是否为某个类型的实例

构造函数

function Person(nick,age){
  this.nick= nick
  this.age = age
  this.printName = function(){
    console.log('say name...')
  }
}

var p1 = new Person('Byron',20)
var p2 = new Person('Casper',25)
//p1.printName()
//p2.printName()

图示可以看出,实例可以通过 __prop__ 访问到其类型的 prototype 属性,这就意味着类的 prototype 对象可以作为一个公共容器,供所有实例访问。

抽象重复

//按照原型链的写法   使用公共容器
function Person(nick,age){
  this.nick= nick
  this.age = age
}
Person.prototype.sayName = function(){
  console.log('say name...')
}

var p1 = new Person('Byron',20)
var p2 = new Person('Casper',25)
// p1.sayName()    `Byron`
// p2.sayName()    `Casper`

这时候对应的关系是这样的



原型链

JS 在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做 __proto__ 的内置属性,用于指向创建它的函数对象的原型对象 prototype 。在访问一个对象属性的时候,如果对象本身没有找到这个属性,就会沿着原型链一层一层的寻找。

总结原型

这三句话能解释一切关于原型方面的问题

  • new 一个函数的时候会创建一个对象,『函数.prototype』 等于 『被创建对象.__proto__

  • 一切函数都是由 Function 这个函数创建的,所以『Function.prototype === 被创建的函数.__proto__

  • 一切函数的原型对象都是由 Object 这个函数创建的,所以『Object.prototype === 一切函数.prototype.__proto__

举例

案例1

扩展 String 的功能增加 reverse 方法,实现字符串倒序

var str = 'hello evenyao'
var str2 = str.reverse()
console.log(str2) //  'oayneve olleh'

即在Stringprototype上添加 关于reversefunction,然后再调用 reverse()

String.prototype.reverse = function(){
        return this.split("").reverse().join("")
    }
    var str = 'hello evenyao'
    var str2 = str.reverse()
    console.log(str2) //  'oayneve olleh'

案例2

代码中并未添加 toString 方法,这个方法是哪里来的?

function People(){
}
var p = new People()
p.toString()

p.toString() 方法是继承构造函数 Object 的原型对象里定义的 toString 方法,首先 p 会找自己的 toString 方法;如果没有找到,就会沿着__proto__ 属性继续到构造函数 Peopleprototype 里找 toString 方法;如果还是没有找到,再继续往 People.prototype__proto__Object.prototypetoString 方法,最后找到 toString 方法。

相关文章

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

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

  • 原型和原型链篇

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

  • 简单认识 JS 原型与原型链

    原型是JavaScript中一个比较难理解的概念, 为深入理解JavaScript 中的原型、原型链,整理下思路。...

  • Javascript学习笔记-原型链

    对于Javascript原型链,是Javascript中很重要的内容,要理解关键有三点:Javascript中原型...

  • 原型、原型链

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

  • 前端基础整理

    如何理解JavaScript原型链JavaScript中的每个对象都有一个prototype属性,我们称之为原型,...

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

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

  • 理解 JavaScript 原型 / 原型链

    关于对象 以下代码中 p 的值是一个新对象,里面拥有 name 和 age 属性 下面代码得到的结果同理,因为 r...

  • javascript原型链及继承的理解

    javascript:void(null)# 原型链及继承的理解 定义函数 继承 继承构造函数 继承静态属性 继承原型链

  • 原型、原型链

    理解JavaScript原型 彻底理解JavaScript原型 原型 原型是一个对象,所有对象都可以成为原型,其...

网友评论

    本文标题:理解 JavaScript 原型 / 原型链

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