原生js构造函数及其对象 学习总结

js构造函数及其对象

ES5

function Person(age) {
	this.name = '张三'
	this.age = age
	this.talk = function () {
		alert('hello')
	}
}
  • 首字母大写
  • 构造函数中的this.属性,this指向实例对象
  • 使用new 实例化对象 如:
const obj1 = new Person(18)

注意:如果直接在构造函数中使用this创建对象的方法,每一个对象都会有各自的原始方法,但是这样一来就会占用多个函数空间。
解决办法:可以使用prototype空间来存放公共使用的对象方法。节省空间。

Person.prototype.talk = function(){}
  • 每一个function函数都自带prototype原型
  • 每一个对象都带有__proto__

对象的__proto__指向其构造函数的原型prototype,对象可以通过这个成员查找使用先前定义在原型里的共享方法或属性。
在__proto__中有一个constructor,指向这个对象的构造函数
instanceof:用来判断一个对象是某个构造函数实例化的对象
字面量定义的化返回false,因为只是一个类型值,不是new出来的对象
对象 instanceof 构造函数

  • 通常来讲:建立构造函数时,属性放在构造函数内部用this.属性 声明,而方法通常放在对象的原型中。

  • 原型链访问规则:访问对象成员时,自己没有就去__proto__中找,一直往上找到Object.prototype,还没有就返回undefined

使用构造函数封装dom操作思路:
1.构造函数中定义属性,属性包括需要操作的dom元素,这些dom元素可以是构造函数接受的参数
2.在原型中定义方法,方法中使用this.属性调用需要操作的dom
3.在需要使用时用new实例化新的对象

ES6

新增class
class可以理解为构造函数的语法糖
class中声明函数不用加function
class中的constructor方法是实例化对象时调用的默认方法

  • 在constructor中使用this来声明实例属性或实例方法
    可以用obj.hasOwnProperty(属性)来判断是否是实例属性
  • 在constructor外,class内声明原型属性或者原型方法

静态方法:class中,在声明前加上static关键字

static sum(a, b) {
	console.log(a + b)
}
posted @   一个斯帕纳  阅读(110)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术
点击右上角即可分享
微信分享提示