zoukankan      html  css  js  c++  java
  • 昼猫笔记 JavaScript -- 面向对象(I)

    本文内容搬运自公众号 原文链接


    本文主要内容:面向对象

    预计阅读时间:6分钟

    面向对象的方式

    • 单例模式(字面量定义) var obj = {}

    • 类的实例 var obj = new Object()

    • 工厂创建

    • 构造函数 扮演了三种角色,(普通函数、普通对象、类)

    面向对象相关问题

    • 构造函数里的属性怎么看?看this,谁前面有this谁就是属性
    function Zhoumao(name, age) {
        var name = '昼猫'
        this.name = name;
        this.age = age;   // name 不属于
    }
    • 如何查找面向对象中的this
    1. 构造函数里的this执行实例对象

    2. 如果是方法中的this,分以下几种情况
      a. 找到this 在调用方式时,看方法前的 . 是谁,this就是谁
      b. 替换this 将this化成找到的那个结果
      c. 精确查找 用原型链查找模式

    3. 关于构造函数中的返回值
      构造函数也是函数,每个函数都有返回值,构造函数返回的是this

    4. 原型的批量添加和直接对象添加的区别

    如果是批量添加属性,没有改变原型的内存地址(浏览器开辟)
    如果是以对象形式添加,就会更改原型的内存地址,浏览器开辟的就会销毁

    function Zhoumao() {
        this.name = 'zhoumao'
    }
    Zhoumao.prototype.age = '12'
    Zhoumao.prototype = {
        sxc: 44
    }
    var zm = new Zhoumao
    var hello = new Zhoumao
    console.log(hello.age)  // undefined
    •  如何给内置类添加方法

    如果给内置类的原型添加方法,使用对象形式添加,不起作用。因为浏览器会保护内置类对象的原型内存地址,只能使用批量的形式添加方法

    // 这种方法是错的
    Array.prototype = {
        sum: function () {}
        // 只能用这种方法添加
        Array.prototype.sum = function () {}
    }
    • 拷贝
      • 浅拷贝:利用 for in 将一个对象的属性,一个一个的复制到另一个对象中
    var obj = {
        name: '昼猫',
        age: '12'
        }
    var obj2 = {}
    for(var key in obj){
        obj2[key] = obj[key]
    }
    console.log(obj2)
      • 深拷贝:如果对象中的属性值又是一个引用数据类型,浅拷贝,还是把后面的引用数据类型的地址赋值给空对象的属性,深拷贝,将属性值一个个遍历赋值
    //将其打包,方便以后使用
    function extend(oldObj, newObj) {
        for (var key in oldObj) {
        var item = oldObj[key]
        if (item instanceof Array) { // 数组
                newObj[key] = []
            extend(item, newObj[key])
        } else if(item instanceof Object){ // 对象
            newObj[key] = {}
            extend(item, newObj[key])
        }else { // 基本类型
            newObj[key] = item    
            }    
        }
    }
    var obj = {
        name: '昼猫',
        age: '12',
        ss: ['1', '2', '3'],
        ssObj: {
            sex: '男',
        node: '昼猫笔记',
        fun: function () {
                console.log(111)
        }    }
    }
    var obj2 = {}
    function extend(oldObj, newObj) {
        for (var key in oldObj) {
        var item = oldObj[key]
        if (item instanceof Array) { // 数组
                newObj[key] = []
            extend(item, newObj[key])
        } else if(item instanceof Object){ // 对象
            newObj[key] = {}
            extend(item, newObj[key])
        }else { // 基本类型
            newObj[key] = item        
            }
        }
    }
    extend(obj, obj2);
    console.log(obj2);
    View Code

  • 相关阅读:
    Python爬虫初识
    使用Hexo和Github Pages快速搭建个人博客
    jQuery Grid入门指南(2)
    jQuery Grid入门指南(1)
    实习小结(五)--- SSM框架搭建(Maven项目)
    win10开机就占用了50%内存,win10越用越卡
    项目导入The type java.lang.String cannot be resolved. It is indirectly referenced from required is indirectly referenced fr
    eclipse中src以文件夹形式展示,没有以package包形式展示
    Unexpected exception parsing XML document from file [F:meideerpinterfacewebWEB-INFclassesspringspring.xml]; nested exception is java.lang.UnsupportedClassVersionError: Bad version number in .cl
    oracle数据导入dmp
  • 原文地址:https://www.cnblogs.com/zhoumao/p/10247868.html
Copyright © 2011-2022 走看看