JavaScript重难点知识之原型全面解剖

JavaScript重难点知识之原型全面解剖

原型的基本概念

原型

• prototype

• function Person () {}
  console.log(Person.prototype)
  

• 是Person的一个属性，也是一个对象

原型的作用

• 给构造出的对象设置公共的属性或方法
• 建立了构造函数和实例化对象的联系

原型在实际中的作用

• 笔试中的常考知识点
• 给我们构造函数实例化出来的对象设置公共的属性或者方法使用的

选择问题

• 需要写在原型上
• 需要配置的属性是写在构造函数上

实例化对象

• 在构造函数里的方法和属性会重新克隆一次，会导致占用内存较高
• 只有构造函数才能对原型上的属性进行改动
• 原型的实质是构造函数的属性

面试常考知识点之原型链

js中的原型链

• 函数才有prototype属性，对象有_proto_属性
• 原型链是什么
  • js中万物皆对象，所有一直访问_proto_属性会产生一条链条
  • 链条的尽头是null
  • 当js引擎查找对象的属性时，会先判断对象本身是否存在改属性
  • 不存在的属性就会沿着原型链查询

function Car() {}
var car = new Car()

插件化开发

• 需求：写一个对两个数字进行加减乘除的计算器
• 为什么要写在函数里
  • 因为函数里声明的量或者函数，对外界无影响
  • 为了让函数在浏览器器加载的时候执行，那么还要用立即函数
• 步骤
  • 写一个立即执行函数
  • 将构造函数写在立即执行函数里
  • 将公共方法写在原型上
  • 将构造函数挂载到window上

;(function() {
 var Computer = function(opt) {}
 Computer.prototype = {
  plus: function(num1, num2) {
	return num1 + num2
 }
}
window.Computer = Computer
})()
var com = new Computer()
var sum = com.plus(21, 23)
console.log(sum)