W260426/11.复习/9.原型和原型链.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 普通函数
        // function fn() {
        //     console.log(this);
        // }
        // fn();
        // // 箭头函数
        // const fn1 = () => {

        // }
        // // 匿名函数
        // let xxx = function () {

        // }
        // // 立即执行函数
        // (function () {

        // })()

        // function fn1() {
        //     console.log(this);
        //     return 1;
        // }
        // console.log(fn1())
        /**
         * 构造函数
         * 1.首字母大写 
         * 2.通过new关键字调用
         * 3.构造函数中this指向当前实例对象
         * 4.不用return返回值
         * 
         * 属性写在构造函数中
         * 方法写在原型中
         */
        function Fn2() {
            this.name = '图图';
            this.age = 3;
            console.log(this, 'this');
        }
        Fn2.prototype.say = function () {
            console.log('我叫' + this.name);
        }

        let aa = new Fn2();
        console.log(aa);
        aa.say();
        /**
         * 原型:
         * 1.所有的构造函数都自带了一个prototype(显性)属性,该属性指向的就是当前构造函数的原型
         * 2.所有构造函数的原型上，自带了constructor(隐性)属性，该属性指向的就是当前构造函数
         * 3.构造函数可以通过new进行实例化 产生该构造函数的实例化对象
         * 4.实例化对象 可以通过_proto_属性访问到该构造函数的原型对象
         */

        function Person() {};
        var person = new Person();
        console.log(person.__proto__ == Person.prototype);
        console.log(Person.prototype.constructor == Person);
        console.log(Object.getPrototypeOf(person) === Person.prototype);
        /**
         * 原型链:
         * 1.访问对象的属性或方法时 现在实例化对象上查找
         * 2.如果实例化对象上没有找到 通过_proto_属性访问到的原型对象上查找
         * 3.如果原型对象上没有找到 则去原型对象的原型上查找 找到则返回 找不到返回undefined 
         * 4.原型链的终点 null
         */
    </script>
</body>

</html>