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

相关文章
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(一)
深入JS面向对象(原型-继承)
31 0
|
1月前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
19 0
|
1月前
|
数据采集 Web App开发 JavaScript
JavaScript爬虫进阶攻略:从网页采集到数据可视化
JavaScript爬虫进阶攻略:从网页采集到数据可视化
|
3月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(三)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
3月前
|
设计模式 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(一)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
3月前
|
前端开发 JavaScript
JavaScript中的原型和原型链
JavaScript中的原型和原型链
|
3月前
|
JavaScript 前端开发
JavaScript进阶知识汇总~(一)
JavaScript进阶知识汇总~(一)
|
3月前
|
JavaScript 前端开发
【面试题】最详尽的 JS 原型与原型链终极详解(一)
【面试题】最详尽的 JS 原型与原型链终极详解(一)
|
3月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(二)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
3月前
|
JavaScript 前端开发
JavaScript原型,原型链
JavaScript原型,原型链