关于前端:new的三步曲-初识面向对象

42次阅读

共计 1401 个字符,预计需要花费 4 分钟才能阅读完成。

@[toc]

0 / 编程语言有哪些

面向对象 OOP:java、javascript、php、C#(ASP.NET)、Python、GO、C++、Ruby…..

面向过程 POP:C

标记语言:HTML、CSS

面向对象编程,咱们须要学什么呢?

对象、类、实例

对象:万物皆对象(这是泛指)

:是对 <u> 对象 </u> 的划分,依照其 <u> 性能构造特点 </u> 等,划分出大类和小类

实例:类中 <u> 具体 </u> 的事务

JS 自身就是基于面向对象思维开发进去的编程语言

所以咱在学习和开发 JS 时,也要依照面向对象的思维去解决

1 / 面向对象思维

<u>面向对象</u> 是从自然界中构建进去的,所有须要钻研和学习的事务都是 <u> 对象 </u>。为了把这些钻研分明,会把他们分类:微生物类、动物类、动物类……

△ 图 1_大自然中的面向对象思维,举个例子

(1)内置类

1、每一种数据类型都有本人所属的内置类:Number/String/Boolean/Null/Undefined/Object/Function

内置函数 Symbol 不是一个残缺的类,应用 new Symbol() 会报错的

比方:Number 数字类,NaN/Infinity/ 每一个数字 都是数字类的实例

2、每一种 DOM 元素也有本人的所属类

△ 图 2_DOM 元素的类

还有一些汇合类:HTMLCollection/NodeList/CSSStyleDeclaration.....

除了 JS 给咱们提供的内置类,咱还能够本人造出想要的各种类——> 自定义类

(2)自定义类

function Fn(x, y){
    let total = x + y;
    this.x = x;
    this.y = y;
    this.say = say;
}
let result = Fn(10, 20); // 作为一般函数调用
console.log(result);

△ 一般函数

function Fn(x, y){
    let total = x + y;
    this.x = x;
    this.y = y;
}
let result = new Fn(10, 20); // 作为类调用
console.log(result);

△ 自定义类

new 函数(); 或者new 函数;

=> 构造函数 / 类 的执行,它和一般函数执行的区别:

类似

1、把函数执行(传递实参也是一样的)

2、造成公有上下文(依照步骤逐个解决即可)

3、也存在公有变量

4、……

不同

new 执行的步骤

1、new执行,浏览器会在以后上下文中,默认创立一个对象:实例对象

2、初始化 this 时,会让 this 指向这个实例对象

① 代码中写的this.xxx=xxx,都是给实例对象设置公有属性

② 除了这些操作,其余的操作和实例对象没有间接关系

3、返回值

① 函数如果没有返回值,或者返回值为根本数据类型值,则默认返回 实例对象

② 如果本人返回的是援用对象,则以本人写的返回值为主

构造函数执行

① 函数被称为

② 返回后果是类的 一个实例对象

△ 图 3_一般函数执行 VS 构造函数执行

嗯~new 这个操作符的确默默地扛下了不少事件呢

2 / 小结

先捋捋 new 都抗下了啥,不便咱当前手写 new 的原理:

① 创立一个实例对象 0xA00001

② 让构造函数 / 类外面的 this 指向这个实例对象,构造函数执行

③ 返回值:

=> 函数没有写返回值或者返回值是根本数据类型值,则返回这个实例对象

=> 函数的返回值是对象数据类型的,则返回函数写的返回值

– end –

new 函数名(); 带参列表 => 运算符优先级 20

new 函数名; 无参列表 => 运算符优先级 19

正文完
 0