前端JavaScript -- 原型详解

最新推荐文章于 2024-04-12 18:05:33 发布

小刘爱搬砖

最新推荐文章于 2024-04-12 18:05:33 发布

阅读量180

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/chang100111/article/details/113948089

版权

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

JS 高级的四大重点
- 原型和原型链
- 执行上下文与上下文栈
- 作用域与作用域链
- 闭包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原型</title>
</head>
<body>
<!--
    1. 函数的prototype属性
        每个函数都有一个prototype属性，它默认指向一个object空对象--原型对象 (没有自己的属性，只有prototype属性)
        每个原型对象中有一个constructor属性()，它指向函数对象
    2. 给原型对象添加属性、方法
        作用：函数的所有实例对象自动拥有原型中的属性
-->
<!--  显式原型与隐式原型
    1. 每个对象都有一个prototype  这就是显式原型（属性）
    2. 每个实例对象都有一个__proto__  隐式原型（属性）
    3. 实例对象的隐式原型的值为其对应构造函数显式原型的值
    4. 函数的prototype属性：在定义函数时自动添加，默认值是空的object对象
       函数的__proto__属性：在创建对象时自动添加，默认值为构造函数的prototype属性值
        在ES6以后可以对显式和隐式原型进行操作，ES6之前只可以操作显式原型
-->

<!--    原型链
    1. 访问一个对象的属性时，现在对象本身的属性中查找，找到则返回，如果找不到则沿着__proto__向上查找，
    如果还没有找到则返回undefined  （类似于缓存 内存之间的关系）
    作用：查找对象的属性（方法）
    2. 所有函数都是Function()的实例（包含Function自身），Object的原型对象是原型链的尽头，Object的原型对象的值为null

       原型链的属性
    1. 读取对象的属性值时：会自动在原型链中查找
    2. 设置对象的属性值时：不会查找原型链，若当前对象没有此属性则为对象添加此属性
    3. 方法一般定义在原型中，属性一般通过构造函数定义在对象本身上
-->
    <script>
        console.log(Date.prototype);
        function test(){}
        //添加一个属性或方法
        test.prototype.one = function(){}
        //test.prototype 就是一个原型对象
        console.log(test.prototype);
        //原型对象test.prototype的一个属性constructor
        test.prototype.constructor;

        //显式原型 隐式原型
        function f() {
        }
        console.log(f.prototype); // Object
        let f1 = new f();
        console.log(f1.__proto__);  //Object
        //实例对象的隐式原型的值为其对应构造函数显式原型的值
        console.log(f.prototype === f1.__proto__); //true

    // 原型链的属性
        function fun() {
        }
        //原型对象 添加属性test
        fun.prototype.test = "Test";
        let fun1 = new fun();
        //实例对象fun1 访问原型对象test属性 读取对象的属性值时：会自动在原型链中查找
        console.log(fun1.test); // Test
        // 设置对象的属性值时：不会查找原型链，若当前对象没有此属性则为对象添加此属性**原型链中的属性仍然存在**
        let fun2 = new fun();
        //设置属性值
        fun2.test = "second";
        console.log(fun1.test,fun2.test); //Test  second
        //** 方法一般定义在原型中，属性一般通过构造函数定义在对象本身上 ** 
        function Dog(name,age) {
            this.name  = name;
            this.age = age
        }
        //方法定义在原型中
        Dog.prototype.setName = function(name){
            this.name = name
        }
        let dog = new Dog('Tom',1);
        console.log(dog);// Dog {name: "Tom", age: 1}
        dog.setName("Ton"); //Dog {name: "Ton", age: 1}
        console.log(dog);// Dog {name: "Tom", age: 1}
        let cat = new Dog('Jack',1);
        console.log(cat);//Dog {name: "Jack", age: 1}
    </script>
</body>
</html>

在这里插入图片描述

感谢尚硅谷老师
正在学习中，不足之处，感谢指正

小刘爱搬砖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端JavaScript -- 原型详解

JS 高级的四大重点- 原型和原型链- 执行上下文与上下文栈- 作用域与作用域链- 闭包<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原型</title></head><body><!-- 1. 函数的prototype属性每个函数都有一个prototype
复制链接

扫一扫

专栏目录