JS中怎么构成原型链的？？？Function Object构造函数.这通通告诉您

贵哥的编程之路

发布于 2020-10-28 15:50:11

7950

发布于 2020-10-28 15:50:11

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		
        function Person(myName, myAge) {
            this.name = myName;
            this.age = myAge;
        }
        let obj1 = new Person("lnj", 34);
         // 1.JavaScript中函数是引用类型(对象类型), 既然是对象,
         // 所以也是通过构造函数创建出来的,"所有函数"都是通过Function构造函数创建出来的对象
         console.log(Function);//Function构造函数
        // 2.JavaScript中只要是"函数"就有prototype属性
         //"Function函数"的prototype属性指向"Function原型对象"
         console.log(Function.prototype);//指向了Function的原型对象
        //  3.JavaScript中只要"原型对象"就有constructor属性
          //"Function原型对象"的constructor指向它对应的构造函数
         console.log(Function.prototype.constructor);//指向了Function构造函数
        // 4.Person构造函数是Function构造函数的实例对象, 所以也有__proto__属性
        //  Person构造函数的__proto__属性指向"Function原型对象"
          console.log(Person.__proto__);//指向了Function的原型对象
          //总结:函数就是对象,对象是通过构造函数创建出来,那对象(函数)是通过什么构造函数创建出来的?
          //Function构造函数.
          //既然是构造函数就一定有prototype,Function构造函数的prototype指向了Function原型对象.
          //只要是原型对象就有constructor,原型对象的constructor指向了之前的Function构造函数.
          //记住,一切的构造函数都是通过Function构造函数实例化出来的
          //既然Person构造函数是通过Function构造函数实例化出来的,那Person一定有__proto__属性,
          //Person的__proto__指向了Function的原型对象.
	</script>
</body>
</html>

第一三个为构造函数,第二四个为原型对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		function Person(myName, myAge)
        {
            this.name = myName;
            this.age = myAge;
        }
         let obj1 = new Person("lnj", 34);
        //总结一下把。
        //只要是函数就是对象,Function构造函数也不例外,
        //所以Function构造函数里面也有__proto__属性，它指向了
        //Function的原型对象
        //注意一下这里,js里面有一个系统提供的构造函数是Object
        //但是记住哈,就算是构造函数Object也是Function的构造函数实例化哈.
        //只要是对象都有__proto__属性,它指向了Function的原型对象.
        //只要是构造函数都有prototype属性,它指向了Object的原型对象,
        //Object的原型对象，只要有原型对象都有一个属性constructor.
        //它指向了对应的Object的构造函数
        console.log(Function.__proto__);//指向了"Function原型对象"
        console.log(Function.__proto__ === Function.prototype); // true

         console.log(Object);//Object构造函数
         console.log(Object.__proto__);//指向了"Function原型对象"
         console.log(Object.__proto__ === Function.prototype); // true
         console.log(Object.prototype);//指向了"Function原型对象"
         console.log(Object.prototype.constructor);//指向了Object的构造函数

        console.log(Object.prototype.constructor === Object); // true
         console.log(Object.prototype.__proto__); // null,Object原型对象的
	</script>
</body>
</html>
<!-- /*
        1. JavaScript函数是引用类型(对象类型), 所以Function函数也是对象
        2."Function构造函数"也是一个对象, 所以也有__proto__属性
          "Function构造函数"__proto__属性指向"Function原型对象"
        3. JavaScript中还有一个系统提供的构造函数叫做Object
           只要是函数都是"Function构造函数"的实例对象
        4.只要是对象就有__proto__属性, 所以"Object构造函数"也有__proto__属性
          "Object构造函数"的__proto__属性指向创建它那个构造函数的"原型对象"
        5.只要是构造函数都有一个默认的属性, 叫做prototype
          prototype属性保存着一个对象, 这个对象我们称之为"原型对象"
        6.只要是原型对象都有一个默认的属性, 叫做constructor
          constructor指向当前原型对象对应的那个"构造函数"
         */-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        /*
        1.所有的构造函数都有一个prototype属性, 所有prototype属性都指向自己的原型对象
        2,所有的原型对象都有一个constructor属性, 所有constructor属性都指向自己的构造函数
        3.所有函数都是Function构造函数的实例对象
        4.所有函数都是对象, 包括Function构造函数
        5.所有对象都有__proto__属性
        6.普通对象的__proto__属性指向创建它的那个构造函数对应的"原型对象"
        7.所有对象的__proto__属性最终都会指向"Object原型对象"
        8."Object原型对象"的__proto__属性指向NULL
         */
        function Person(myName, myAge) {
            this.name = myName;
            this.age = myAge;
        }
        let obj1 = new Person("lnj", 34);

        console.log(Function.prototype.__proto__);//指向了Object的原型对象
        console.log(Person.prototype.__proto__);//指向了Object的原型对象
        console.log(Function.prototype.__proto__ === Person.prototype.__proto__);
        console.log(Function.prototype.__proto__ === Object.prototype);//相等的
        console.log(Person.prototype.__proto__ === Object.prototype);//相等的
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        /*
         1.对象中__proto__组成的链条我们称之为原型链
        2.对象在查找属性和方法的时候, 会先在当前对象查找
          如果当前对象中找不到想要的, 会依次去上一级原型对象中查找
          如果找到Object原型对象都没有找到, 就会报错
         */
        function Person(myName, myAge) {
            this.name = myName;
            this.age = myAge;
            // this.currentType = "构造函数中的type";
            // this.say = function () {
            //     console.log("构造函数中的say");
            // }
        }

        Person.prototype = {
            // 注意点: 为了不破坏原有的关系, 在给prototype赋值的时候, 需要在自定义的对象中手动的添加constructor属性, 手动的指定需要指向谁
            constructor: Person,
            // currentType: "人",
            // say: function () {
            //     console.log("hello world");
            // }
        }
        let obj1 = new Person("lnj", 34);
        // obj1.say();
        console.log(obj1.currentType);
        console.log(Person.prototype.constructor);//指向了Person的构造函数
    </script>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/08/15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

对象