JavaScript 进阶第五章(原型)

简介: JavaScript 进阶第五章(原型)

1.原型 prototype


原型上存放函数


  1. 解决了同一个 say 浪费 内存的问题


  1. 解决了污染全局变量的问题
   function createStudent(name, age) {
      this.name = name;
      this.age = age;
    }
    // 将刚才的全局函数say 直接挂载到 构造函数的原型上 即可
    // prototype 是个对象 每一个构造函数都会内置有的. 我们称之为原型
    createStudent.prototype.say = function () {
      console.log(this.name);
    }
    const obj = new createStudent("海海", 18);
    const obj1 = new createStudent("海海呀", 19);
    console.log(obj.say === obj1.say); // true 


原型解释


原型的单词是 prototype


原型本质是一个对象,理解为 JavaScript 自动帮我们添加的


原型是 JavaScript 自动帮我们在定义构造函数的时候添加的


所有构造函数的实例,共享一个原型


原型上一般是挂载函数


20210829200728701.png


2.原型 proto


实例的 proto 属性 等于 构造函数的 prototype


3.原型的关系


所有的构造函数都是Function的实例


Array 和 Person 和 Date 等都是 Function的实例

20210829201001674.png


Function 和 Object的关系


console.log(Object.prototype===Function.prototype.__proto__)


2021082920111347.png


Object的顶端


console.log(Object.prototype.__proto__ === null);


2021082920122928.png


最终的原型链

20210829201308398.png

相关文章
|
3月前
|
JavaScript 前端开发
如何在JavaScript中实现基于原型的继承机制
【8月更文挑战第14天】如何在JavaScript中实现基于原型的继承机制
29 0
|
2月前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26
|
2月前
|
JavaScript 前端开发
JavaScript prototype(原型对象)
JavaScript prototype(原型对象)
30 0
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-原型(prototype)
关于JavaScript基础知识中原型(prototype)概念的介绍。
37 1
|
3月前
|
JavaScript 前端开发
JavaScript中什么是原型?有什么用?
JavaScript中什么是原型?有什么用?
20 1
|
3月前
|
JavaScript 前端开发 Java
什么是JavaScript原型对象
【8月更文挑战第2天】什么是JavaScript原型对象
60 9
|
4月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
137 24
|
3月前
|
设计模式 JavaScript 前端开发
js对原型和继承的理解
了解JavaScript中原型和继承的概念对于编写优雅高效的代码、理解库和框架的内部机制以及执行高级设计模式都有着重要的意义。
44 0
|
4月前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
57 1
|
3月前
|
JavaScript 前端开发
详细讲解!JavaScript原型 !
详细讲解!JavaScript原型 !