首页 > 编程语言 >JavaScript(四)面向对象

JavaScript(四)面向对象

时间:2023-07-03 20:46:26浏览次数:42  
标签:对象 JavaScript ---- 面向对象 原型 new prototype

创建对象

prototype对象

JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。

当我们用obj.xxx访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype对象,最后,如果还没有找到,就只能返回undefined

//1、创建一个数组对象
var arr = [1, 2, 3];
//原型链
arr ----> Array.prototype ----> Object.prototype ----> null

//2、创建一个函数
function foo() {
    return 0;
}
//函数也是一个对象,它的原型链是
foo ----> Function.prototype ----> Object.prototype ----> null

Array.prototype定义了indexOf()shift()等方法,因此你可以在所有的Array对象上直接调用这些方法

Function.prototype定义了apply()等方法,因此,所有函数都可以调用apply()方法。

如果原型链很长,那么访问一个对象的属性就会因为花更多的时间查找而变得更慢,因此要注意不要把原型链搞得太长。

构造函数

不使用new调用一个普通函数,它返回undefined

使用new调用,它就变成了一个构造函数,它绑定的this指向新创建的对象,并默认返回this,也就是说,不需要在最后写return this;

原型继承

JavaScript的原型继承实现方式就是:

  1. 定义新的构造函数,并在内部用call()调用希望“继承”的构造函数,并绑定this

  2. 借助中间函数F实现原型链继承,最好通过封装的inherits函数完成;

  3. 继续在新的构造函数的原型上定义新方法。

ES6版本的类

Es5和Es6写法不一样,以下是Es6的写法

class Person{
    //构造器
    constructor(naem,age){...}
    // 方法无function关键字
    method_1(){...}
}

属性:实例属性(构造器中的),其他属性,静态属性(在类调用处,使用类.属性添加静态属性)

方法:实例方法,静态方法(关键字static)

继承:关键字extends

标准对象

包装对象

  • 不要使用new Number()new Boolean()new String()创建包装对象;

  • parseInt()parseFloat()来转换任意类型到number

  • String()来转换任意类型到string,或者直接调用某个对象的toString()方法;

  • 通常不必把任意类型转换为boolean再判断,因为可以直接写if (myVar) {...}

  • typeof操作符可以判断出numberbooleanstringfunctionundefined

  • 判断Array要使用Array.isArray(arr)

  • 判断null请使用myVar === null

  • 判断某个全局变量是否存在用typeof window.myVar === 'undefined'

  • 函数内部判断某个变量是否存在用typeof myVar === 'undefined'

RegExp

正则对象RegExp,使用new创建正则对象,使用test()方法测试给定的字符串是否符合条件

var re2 = new RegExp('ABC\\-001');
re2.test('010-12345');

JSON

JSON是JavaScript Object Notation的缩写,它是一种数据交换格式

在JSON中,一共就这么几种数据类型:

  • number:和JavaScript的number完全一致;

  • boolean:就是JavaScript的truefalse

  • string:就是JavaScript的string

  • null:就是JavaScript的null

  • array:就是JavaScript的Array表示方式——[]

  • object:就是JavaScript的{ ... }表示方式。

以及上面的任意组合。

// 序列化
JSON.stringify(obj);
// 反序列化
JSON.parse('{"name":"小明","age":14}')

 

标签:对象,JavaScript,----,面向对象,原型,new,prototype
From: https://www.cnblogs.com/yjh1995/p/17523957.html

相关文章

  • JavaScript(三)Array的高阶函数
    map、reducemap:map()方法定义在JavaScript的Array中,接收一个函数对象作为参数,函数定义运算规则,对array中的每个元素进行运算,结果是一个新的array。functionpow(x){returnx*x;}vararr=[1,2,3,4,5,6,7,8,9];varresults=arr.map(pow);//[1,4,9......
  • JavaScript(一)基础
    JS引入到文件嵌入到html文件中,在<header>或<body>中使用<script><script> vari=10; console.log(i);</script>引入JS文件,在<header>或<body>中使用<script><scriptsrc="./index3_script.js"type="text/j......
  • 面向对象综合案例练习
    面向对象综合案例练习练习1:文字版格斗游戏格斗游戏:每个游戏角色的名字血量都不同,在选定人物的时候(new对象的时候),这些信息就应该被确定下来建立两个类:角色类和测试类packagecom.itheima.MethodAllTest01;importjava.util.Random;publicclassRole{privateSt......
  • 简单的python面向对象案例——跑步或吃饭
    个人学习,仅供参考要求对象:小明a.属性:姓名,体重b.方法:跑步,吃东西(每次跑步会减掉0.1kg,每次吃东西增加0.2kg)输入名字以初始体重选择跑步或吃东西,输入次数打印当前体重代码如下:#定义一个类classPerson(object):#公共属性def__init__......
  • JavaScript 中 object 的几个方法:entries,values,keys 对比
    在JavaScript中,对象(Object)是一种无序的键值对集合。以下是entries,values和keys这三个对象方法的比较: entries()方法:返回一个包含对象的键值对的数组。每个键值对都是一个数组,包含两个元素,第一个元素是键名,第二个元素是对应的值。1constobj={a:1,b:2,c:3};2conso......
  • HTML+CSS+JavaScript基础
    1、HTML(HypertextMarkupLanguage,超文本标记语言),用来向浏览器说明内容的结构、2、DOM(DocumentObjectModel,文档对象模型)指的是HTML标签的层次结构。每一对HTML标签(有的时候是一个标签)都是一个元素。3、CSS(CascadingStyleSheets,层叠样式表),控制DOM元素的视觉外观......
  • JavaScript 拖拽
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #box1{ width:100px; height:100px; background-color:red; position:a......
  • JavaScript 事件的绑定
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scripttype="text/javascript"> window.onload=function(){ /* *点击按钮以后弹出一个内容 */ //获取按钮......
  • JavaScript 事件的传播
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #box1{ width:300px; height:300px; background-color:yellowgreen; } ......
  • JavaScript 事件的委派
    <!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title></title> <scripttype="text/javascript"> window.onload=function(){ varu1=document.getElementById("......