前端JavaScript -- 原型详解

怼烎@ 2022-10-31 12:26 109阅读 0赞

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>原型</title>
    </head>
    <body>
    
    
    
    
        <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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW5nMTAwMTEx_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW5nMTAwMTEx_size_16_color_FFFFFF_t_70 1]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW5nMTAwMTEx_size_16_color_FFFFFF_t_70]: /images/20221024/961335baa2fb40659af1884a4afc544e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoYW5nMTAwMTEx_size_16_color_FFFFFF_t_70 1]: /images/20221024/e0db6379a4464e4fa3474d1e8d11f376.png