美文网首页
对象&原型

对象&原型

作者: 学的会的前端 | 来源:发表于2019-10-09 19:30 被阅读0次

    对象

    一个对象就是一系列属性的集合,一个属性包含一个名字和一个值。一个属性的值可以是函数,这种情况下属性也被称为方法

    var obj = {
        a: 1,
        b: 'sdf',
        sayName: function(){
            console.log(this.a)
        }
    }
    obj.sayName()
    

    可用于封装函数,调用函数时直接调用函数的属性即可。

    对象字面量

    var p1 = new object()
    var p2 = {}
    

    对象字面量和 JSON 的关系

    1. JSON(JavaScript Object Notation)脱胎自 JavaScript,但它是一种数据交换格式.
    2. JSON 格式的数据只包括 字符串、数组、数字、布尔、null、对象
    3. 键必须用双引号,字符串必须用双引号
    4. JS中的对象字面量属性可不加引号,值可以是任意类型,如函数、正则、undefined

    问题

    1. JSON、JSON 字面量、JSON 对象有什么区别?
    2. 除了 JSON 你还知道有哪些数据交换格式? 参考

    构造函数创建对象

    function Student(name, sex){
      this.name = name
      this.sex = sex
    }
    var s1 = new Student('若愚', '男')
    var s2 = new Student('方方', '男')
    console.log(s1.name)
    
    

    执行过程

    1. 当 new 一个函数的时候,这个函数就会作为构造函数创建一个对象
    2. 函数里面的 this 代表创建的这个对象。给 this添加属性就是给要创建的对象添加属性
    3. 上述代码执行流程如下:
    • 创建一个空对象 s1
    • 执行构造函数。里面的 this 代表s1, 给s1 添加属性

    原型

    function Student(name, sex){
      this.name = name
    }
    Student.prototype.sayName = function(){
      console.log(this.name)
    }
    var s1 = new Student('若愚')
    s1.sayName()
    
    

    构造对象

    new

    • new运算符接受一个函数F及其参数,new F(arguments...),这一过程分为三步:
    1. 创建类的实例,这步是把一个空对象的proto属性设置为F.prototype
    2. 初始化实例,函数F被传入参数并调用,关键字this被设定为该实例。
    3. 返回实例
    • 代码示例
    function People(name){
        this.name = name
        this.sayName = function(){
            console.log(this.name)
        }
    }
    var p1 = new People('hunger')
    // 1. 创建空对象p1{}(实例)
    // 2. p1.nme = hunger
    // 3. p1.sayName = function(){}
    //2.3步为初始化实例,此时this指向该实例。
    // 4. 返回一个对象return p1
    
    p1.name //使用该实例
    p1.sayName() 
    
    • new关键字的作用
    1. 不用创建临时对象,因为 new 会帮你做(你使用「this」就可以访问到临时对象);
    2. 不用绑定原型,因为 new 会帮你做(new 为了知道原型在哪,所以指定原型的名字为 prototype);
    3. 不用 return 临时对象,因为 new 会帮你做;
    4. 不要给原型想名字了,因为 new 指定名字为 prototype。

    instanceof

    instanceof是一个操作符,可以判断对象是否为某个类型的实例

    p1 instanceof People //true
    p1 instanceof Object //true
    //Object其实是一个函数,我们平时所说的对象,都由这个函数创建,都是这个函数的实例。
    

    构造函数

    • 任何函数使用new表达式就是构造函数
    • 每个函数都自动添加一个名为prototype属性,这是一个对象
    • 每个对象都有一个内部属性__proto__,指向其类型的prototype属性,类的实例也是对象,其__proto__指向"类"的prototype

    抽象重复

    • 所有实例都会通过原型链引用到类型的prototype
    • prototype相当于特定类型所有实例都可以访问到的一个公共容器
    • 重复的东西移动到公共容器里放一份就可以了

    代码改进

    function People(name){
        this.name = name
    }
    People.prototype.sayName = function(){
      console.log(this.name)
    }
    var p1 = new People('hunger')
    

    原型

    1. 任何函数在声明后都有一个属性 prototype,对应的值是一个对象叫原型对象
    2. 当 new 这个函数的时候,会作为构造函数创建一个对象
    3. 对象里面会有一个__proto__隐藏属性,指向上述构造函数原型对象
    4. 当访问对象的属性时先从对象本身里找,找不到再从原型对象里找

    原型链

    原型链.PNG
    • prototype__proto__的区别
    1. prototype 指向一块内存,这个内存里面有共用属性
    2. __proto__指向同一块内存
    3. prototype__proto__的不同点在于
    4. prototype 是构造函数的属性,而__proto__是对象的属性

    「读」属性时会沿着原型链搜索。

    「新增」属性时不会去看原型链(但是如果你给这个属性加了一些配置,则不一样,

    JS 中 proto 和 prototype 存在的意义是什么?
    什么是 JS 原型链?
    this 的值到底是什么?
    JS 的 new 到底是干什么的?
    你怎么还没搞懂 this?

    面向对象

    面向对象的思路:把某个功能看成一个整体(对象),通过调用对象的某个方法来启动功能。在用的时候不去考虑这个对象内部的实现细节,在去实现这个对象细节的时候不用管谁在调用

    • 面向对象是什么?
      面向对象程序设计(英语:Object-oriented programming,缩写OOP,是种具有对象概念的程序编程典范,同时也是一种程序开发的抽象方针。是一种思维方式。
    • 特点:
    1. 继承
    2. 多态
    3. 封装
    • 几个概念
      类、对象、属性、方法、成员、类成员、实例成员、静态类、抽象类
    • 面向对象的使用场景
      GUI编程。

    相关文章

      网友评论

          本文标题:对象&原型

          本文链接:https://www.haomeiwen.com/subject/bfxnpctx.html