前端~javascript~js对象/new关键字/对象比较/proto原型链

Salute-Y

已于 2022-03-09 15:16:30 修改

阅读量1.4k

点赞数 12

分类专栏： Java API LeetCode 文章标签： javascript 前端开发语言

于 2022-03-09 15:15:49 首次发布

本文链接：https://blog.csdn.net/Merciful_Lion/article/details/123369139

版权

Java API 同时被 2 个专栏收录

38 篇文章 2 订阅

订阅专栏

LeetCode

14 篇文章 0 订阅

订阅专栏

文章目录

对象

对象

对象是指一个具体的事物。
在JS中，字符串，数值，数组，函数都是对象。
每个对象都有自己的属性和方法。

对象的创建

1.使用字面量进行创建
创建对象，使用{}括起来。
对象里面的成员，都是通过“键值对”来表示对。

<script>
    let student={
        name:'张三',
        age:20,
        height:175,
        sayHello:function () {
            console.log('hello');
        }
    }

    let student2={
        name:'李四',
        age:20,
        height:180,
        sayHello:function () {
            console.log('hello');
        }
    }
    let s=student;
    s=student;
</script>

访问对象：

   console.log(student.name);
    console.log(studeng['age']);

2.使用new Object创建对象

JS中的对象都可以视为Object类型。

<script>
    let student =new Object();
    //基本属性
    student.name='张三';
    student.age=20;
    studeng.height=175;
    //方法
    sutudeng.sayHello=function () {
        console.log(hello);
    }
</script>

<script>

    //构造函数，类似于Java中类的定义。
    function Cat(name,type) {
        this.name=name;
        this.type=type;
        this.miao=function () {
            console.log('hello');
        }
    }
    
    /创建实例，按照“模板”进行创建
    let cat1=new Cat('小a','中华田园犬');
    let cat2=new Cat('小b','中华田园猫');
    

</script>

上面的函数对象设定，相比于Java中的对象，只能算是个“半成品”.
ES6开始，引入了class关键字，可以通过class来定义一个类。但ES6的class 本质上是个语法糖，在JS底层仍然是通过这种构造方法的方式来创建出的实例.

理解new关键字

new关键字（MDN文档中也称为 new运算符）创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    function Car(make, model, year) {
        this.make = make;
        this.model = model;
        this.year = year;
    }

    const car1 = new Car('Eagle', 'Talon TSi', 1993);

 // expected output: "Eagle"
    console.log(car1.make);
   
</script>
</body>
</html>

语法规范

new constructor[([arguments])]

constructor：一个指定对象实例的类或函数
arguments： 用于被调用的参数列表

new 的运行过程

先在内存中创建一个空的对象{}
this指向刚才的空对象
执行构造函数的代码，给对象创建属性和方法
返回这个对象（不需要return）

JavaScript对象和Java对象的比较

JS中没有"类"的概念
对象其实就是属性和方法。
类相当于把一些具有共性的对象的属性和方法单独提取了出来，相当于一个模型。在JS中的"构造函数"也能起到类似的效果，即使不使用JS中的构造函数，也可以随时通过创建 { } 的方式动态的指定一些对象。

注意：ES6之后也引入了class 关键字，也可以类似于java的方式创建类和对象了。上面介绍的情况适用于ES6之前的版本

JS对象不区分"属性"和"方法"
JS对象没有"继承"
继承的本质就是让两个对象之间建立关联，让子类对象能够使用父类的方法和属性，在JS中，虽然没有所谓的“继承”,但可以通过proto原型机制实现类似的效果。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
     //dog类
    let dog={
        name:"dog",
         //原型指向animal
        _proto_:animal
    };
    //cat类
    let cat={
        name:'cat',
        //原型指向animal
        _proto_:animal
    };
    dog.eat();
    cat.eat();
</script>
</body>
</html>

上述代码中，调用eat方法后，会先在自己的方法列表寻找，如果找不到，就会去找proto原型中的方法,如果仍未找到，就会去原型的原型中去寻找…如果最后找到了Object类型中仍未找到，那就会返回undefined.

逻辑链如下图：
在这里插入图片描述

关于JS中的原型机制：
JS中的原型机制，是JS引擎在设计时给开发者留下的一个“后门”，相当于 Java中的反射机制，JVM给java留下的“后门”，相当于C/C++中的hook机制，是操作系统给C/C++留下的“后门”。这些都是一些非常规手段，是从更底层的角度帮开发者解决问题。

JS没有“多态”
多态的本质是让开发者不必关注具体的类型，就可以使用某个方法。
Java和C++等静态类型的语言对于类型的约束和校验非常严格，因此通过子类继承父类，重写父类方法的方式来实现多态的效果。
但在JS这种动态类型的语言中，对某个方法使用时本就不需要关注变量的类型，所以也不用做出明确区分，也就不需要“多态”这种机制。

Salute-Y

关注

12
点赞
踩
3

收藏

觉得还不错? 一键收藏
7
评论
前端~javascript~js对象/new关键字/对象比较/proto原型链

文章目录对象对象的创建理解new关键字JavaScript对象和Java对象的比较对象对象是指一个具体的事物。在JS中，字符串，数值，数组，函数都是对象。每个对象都有自己的属性和方法。对象的创建1.使用字面量进行创建创建对象，使用{}括起来。对象里面的成员，都是通过“键值对”来表示对。<script> let student={ name:'张三', age:20, height:175, sayHello
复制链接

扫一扫