前端学习JS进阶第三天（P15--P21）-CSDN博客

本文链接：https://blog.csdn.net/xiaoxiaosu233/article/details/123021082

一、prototype属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--
1.函数prototype属性
每个函数都有一个prototype属性，他默认指向一个Object空对象（即成为原型对象，没有我们的属性）
原型对象中有一个属性constructor，他指向函数对象
构造函数和原型对象相互引用
2.给原型对象添加属性
作用是函数的所有实例对象自动拥有原型中的方法
-->

    <script>
        function Fun() {
        }

        Fun.prototype.test = function () {
            console.log("test()")
        }
        console.log(Fun.prototype)


        console.log(Date.prototype.constructor === Date)
        //给原型对象添加属性，一般是方法 ===>实例对象可以访问
        Fun.prototype.test = function () {
            console.log("test()")
        }

        let fun = new Fun()
        fun.test()
    </script>
</head>
<body>

</body>
</html>

二、显式原型和隐式原型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--
1.每个函数都有一个prototype，即显式原型
2.每个实例对象都有一个__proto__，可成为隐式原型
3.对象的隐式原型的值为其对应构造函数的显式原型的值
4.内存结构
5.总结
函数的prototype属性：在定义函数时自动添加的，默认值是一个空Object对象
对象的__proto__属性：创建对象时自动添加的，默认值为构造函数的prototype属性值
程序员能直接操作显式原型，但不能直接操作隐式原型，ES6之前

-->


    <script>
        //定义构造函数
        function Fn() {//this.prototype = {}

        }

        console.log(Fn.prototype)

        let fn = new Fn()//this.__proto__ =Fn.prototype
        console.log(fn.__proto__)

        console.log(Fn.prototype===fn.__proto__)
        //给原型添加方法
        Fn.prototype.test = function () {
            console.log("test()")
        }
        //通过实例对象调用原型的方法
        fn.test()
    </script>
</head>
<body>

</body>
</html>

三、原型链

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
1.原型链（图解）
*访问一个对象的属性时，
    *先在自身属性中查找，找到返回
    *如果没有，再沿着__proto__这条链向上查找，找到返回
    *如果最终没有找到，返回undefined
  *别名：隐式原型连
  *作用：查找对象的属性（方法）
2.构造函数/原型/实体对象的关系（图解）
3.构造函数/原型/实体对象的关系2（图解）

-->
    <script>
        function Fn(){
         this.test1 = function(){
          console.log('test1()')
         }
        }
        console.log(Fn.prototype)
        Fn.prototype.test2 = function () {
            console.log('test2()')
        }
        let fn = new Fn()
        fn.test1()
        fn.test2()
        console.log(fn.toString())

        fn.test3()

    /*
    * 1.函数的显式原型指向的对象默认是空Object实例对象（Object不满足）
    * 2.所有函数都是Function的实例（包括他本身）
    * 3.读取对象属性时会从原型链中查找，如果设置属性值，就不会查找原型链，会直接添加
    * 4.方法一般定义在原型中，属性一般通过构造函数定义在对象本身上
    * */







    </script>
</head>
<body>

</body>
</html>