首页 > 其他分享 >原生js构造函数及其对象 学习总结

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

时间:2022-08-15 12:55:51浏览次数:52  
标签:原生 __ 对象 js 实例 构造函数 class 属性

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)
}

标签:原生,__,对象,js,实例,构造函数,class,属性
From: https://www.cnblogs.com/yoe-note/p/16587911.html

相关文章

  • PHP与JS互相加密解密方法2.0【转载】
    本文转自:https://blog.csdn.net/qq_32845825/article/details/123705487前言:之前写过一个加密解密1.0版本的,但是随着PHP版本升级,那个不能用了,当初使用的是PHP5中的mcrypt......
  • JSP的概述以及JSP的指令
    JSP的概述1、作用:用于配置JSP页面,导入资源文件2、格式:<%@指令名称属性名1=属性值1属性名2=属性值2......%>3、分类1、page:配置JS......
  • 解决fastJson反序列化问题 com.alibaba.fastjson.JSONObject cannot be cast to 的问
    问题描述:个简单的查询逻辑即查询前先从redis取,取到后则进行反序列化。StringresJson=redisService.getString(name);if(StringUtil.isNotEmpty(resJson)){//......
  • JS学习-Web Workers API接口
    WebWorkersAPI接口通过使用WebWorkers,Web应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线......
  • vscode配置setting.json
    配置setting.json{  "editor.largeFileOptimizations":false,  "editor.fontSize":15,  "bracketPairColorizer.depreciation-notice":false,  "f......
  • JSP概念和JSP原理
    JSP入门学习概念:JavaServerPages:Java服务器端页面可以理解为:一个特殊的页面,其中既可以指定定义html标签,又可以定义java代码用于简化书写<html><head>......
  • 技术分享 | 接口自动化测试之JSON Schema模式该如何使用?
    原文链接JSONSchema模式是一个词汇表,可用于注释和验证JSON文档。在实际工作中,对接口返回值进行断言校验,除了常用字段的断言检测以外,还要对其他字段的类型进行检测。对......
  • JsonConfig配置Clob
    1.情景展示  项目使用的是Oracle数据库,并且表中的某些字段类型设置成了clob类型;  当我们从数据库读取数据的时候,需要单独对clob字段进行处理,否则返回的是内存地址......
  • 使用JS正则获取字符串中全部的特定匹配项(分组)
     。。 示例:conststr='bedab1cvhuab2ikmab3ng';constreg=/ab(\d+)/g;constans=[];letmatched=null;while((matched=reg.exec(str))!==null){......
  • ExtJS - UI组件 - Buttion
    更新记录转载请注明出处:https://www.cnblogs.com/cqpanda/p/16587153.html2022年8月15日发布。2022年8月13日从笔记迁移到博客。ExtJS教程汇总:https://www.cnblog......