JavaScript函数高级（三）之原型链属性问题

末蓝、 2022-01-23 12:55 188阅读 0赞

\*\*\*1、读取对象的属性值时：  
会自动到原型链中查找  
\*\*\*2、设置对象的属性值时：  
不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值  
\*\*\*3、方法一般定义在原型中；  
属性一般通过构造函数定义在对象本身上  
4、  
一般情况下，不会在原型上添加属性。  
每个对象都有自己的属性。

--------------------

实例1：

function Fn() { }
    
        Fn.prototype.a = "xxx";//随便写的，无意义
        var fn1 = new Fn();
        console.log(fn1.a, fn1);//xxx
        /* fn1 * Fn {} * __proto__: Object

--------------------

实例2：

* **/
        var fn2 = new Fn();
        fn2.a = "yyy";//如果这句注释；fn2.a在本身是查找不到a的，就会去原型链上查找，
                      // 这时就会自动添加原型__proto__，并赋值
        console.log(fn1.a, fn2.a, fn2);//xxx
        /* * fn2: * ->Fn {a: "yyy"} a: "yyy" __proto__: a: "xxx" constructor: ƒ Fn() __proto__: Object * */

--------------------

实例3

function Person(name, age) { 
            this.name = name;
            this.age = age;
        }
    
        Person.prototype.setName = function (name) { 
            this.name = name;
        }
        Person.prototype.getName = function (name) { 
            return this.name;
        }
        var p1 = new Person('Tom', 29);
        var p2 = new Person();
        console.log(p1.name);//Tom
        p1.setName('Hono');
        console.log(p1.name);//Hono
        p2.setName('Bob');
        console.log(p2.getName());//Bob
        console.log(p1);//方法在原型
        /* * Person {name: "Hono", age: 29} age: 29 name: "Hono" __proto__: getName: ƒ (name) setName: ƒ (name) constructor: ƒ Person(name, age) __proto__: Object * */
    
        var p3 = new Person('Jk', 29);
        p3.setName('Jack');
        console.log(p3.name);//Hono
        console.log(p1.__proto__ === p3.__proto__);//true
        console.log(p1.__proto__ === p2.__proto__);//true

注：p1.**proto** === p3.\_\_proto\_\_是正确的，因为p1和p2都是通过Person构造函数new出来的实例对象

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关《现代Javascript高级教程》原型和原型链

<table> <thead> <tr> <th><a href="https://www.coding-time.cn" rel="nofollow">点击

悠悠/ 2023年10月13日 10:21/ 0 赞/ 42 阅读

相关 JavaScript高级day02-PM【原型链的属性问题、探索instanceof、原型面试题】

> [笔记、视频、源码：JavaScript(基础、高级)笔记汇总表【尚硅谷JavaScript全套教程完整版】][JavaScript_JavaScript] 目录 P1

亦凉/ 2023年01月12日 11:58/ 0 赞/ 100 阅读

相关 javascript 本地属性、继承属性、原型链

1. Javascript 具有本地属性（own property），也有一些属性是从原型对象继承而来的，称为继承属性。 function Obj(

比眉伴天荒/ 2022年12月18日 04:55/ 0 赞/ 163 阅读

相关 javascript（三）原型原型链 Object.prototype

原型链 JavaScript 中有两个特殊的对象： Object 与 Function，它们都是构造函数，用于生成对象。 Object.prototype 是所有对象的祖

以你之姓@/ 2022年08月09日 13:56/ 0 赞/ 218 阅读

相关 JavaScript原型和原型链(三)

原型链原型对象prototype 构造函数constructor 隐式原型\_\_proto\_\_ 通过三者之间的联系，形成了原型链继续看一下我门昨

骑猪看日落/ 2022年04月01日 02:26/ 0 赞/ 340 阅读

相关 javascript之原型，原型链

1.定义：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。 2.利用原型特点

╰半夏微凉°/ 2022年03月15日 12:04/ 0 赞/ 396 阅读

相关 JavaScript函数高级（三）之原型链属性问题

\\\1、读取对象的属性值时：会自动到原型链中查找 \\\2、设置对象的属性值时：不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值 \\\

末蓝、/ 2022年01月23日 12:55/ 0 赞/ 189 阅读

相关 JavaScript之函数的高级（二）原型链

3、原型链 > 原型链的尽头：Object原型对象，即\_\_proto\_\_=null 3.1 什么才具有prototype？=====》 \函数对象，（函数

「爱情、让人受尽委屈。」/ 2022年01月23日 12:49/ 0 赞/ 233 阅读

相关 JavaScript之函数的高级（一）原型

原型与原型链 1 原型prototype > 1、函数的prototype属性（图） > ![函数的prototype属性][prototype] > 每个

迷南。/ 2022年01月23日 12:45/ 0 赞/ 258 阅读

相关 JavaScript 之原型和原型链

引用我很喜欢一篇文中的图片： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

今天药忘吃喽~/ 2021年12月21日 05:19/ 0 赞/ 330 阅读