2023-02-01 JS 自己总结的面向对象,以及this的几种情况

这一段时间都在回顾和总结之前JS中一些比较重要的内容,再次写个日记,记录下

面向对象的三大特征:
1.封装
2.继承
3.多态

封装
封装是指创建一个对象集中保存一个事物的属性与功能:
封装对象有三种方式:
\color{red}{第一种 }:直接用{}

    var obj = {}
    var obj1 = {
      name: '本泽锅',
      foo: function() {
        console.log(`I'm ${name}`)
        //这里直接用name会报错,Uncaught ReferenceError: name is not defined
        //原因就是对象的{}不是作用域,函数foo的作用域链只有自己和顶层的window,显然会报错
        //解决方法:
         console.log(`I'm ${this.name}`)
        //这里就是 this的第一种情况:在普通函数中的this,指向的是调用当前函数的.前的对象
      }
    }
    console.log('obj', obj)
    console.log('obj1', obj1)

\color{red}{ this的第一种情况:在普通函数中的this,指向的是调用当前函数的.前的对象 }

\color{red}{第二种 }:通过new关键词新建对象

    var obj = new Object()
    console.log('obj',obj)
    var obj1 = new Object()
    obj1.name = '本泽锅'

\color{red}{第三种 }:通过构造函数的方式

     function Student (name,foo) { 
      //将来要加入到新对象中的属性和方法
        this.name = name
        this.foo= foo
        //这里就是 this的第二种情况:在构造函数中的this,指向的是new创建的新对象
    }
 
    //  实例化1
    var obj = new Student()
    console.log('obj',obj)
    //  实例化2
    var obj1 = new Student('本泽锅',function (){
    })
    console.log('obj1',obj1)
    obj1.foo()
      
    总结: 通过构造函数的方式创建对象  一共干了4件事
    1.创建了一个新的空对象。
    2.让子对象继承构造函数的原型对象。(将子对象的隐式原型__proto__指向创建该构造函数的显示原型prototype上)
    3.调用构造函数,将this替换为新对象,通过强行赋值的方式为新对象添加属性和方法。
    4.返回新对象的地址值。

\color{red}{ this的第二种情况:在构造函数中的this,指向的是new创建的新对象 }

继承
继承是父对象中的成员,子对象无需重复创建,就可以直接使用。
js中的几种都是通过原型对象来实现的。
原型对象:替所有子对象集中保存共有属性和方法的父对象。

概念:每一个构造函数都有一个显示原型ptototype.
每一个对象都有一个隐式原型proto,对象的隐式原型指向创建该构造函数的显示原型

当我们通过构造函数实例化一个对象的时候,就会自动将子对象的隐式原型指向创建该构造函数的显示原型,这样就达到了继承的目的。

原型执行规则
当我们获取对象的属性或者方法时,首先在自身查找,如果有的话就使用,如果没有的话,就自动去隐示原型proto中去查找,而隐示原型会指向创建该对象构造函数的显示原型prototype去查找
原型链
当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的proto隐式原型上查找,即它的构造函数的prototype,如果还没有找到就会再在构造函数的prototype的proto中查找,这样一层一层向上查找就会形成一个链式结构,我们称为原型链,直到找到顶端Object的显示原型prototype,而Object的显示原型prototype中隐示原型proto为null,这样就停止了。

向原型对象中添加共有属性和方法:

     function Student (name,foo) { 
        this.name = name
        this.foo= foo
    }
    //只能通过强行赋值的方法
    Student.prototype.location= '武汉'
    Student.prototype.study=function(){
    console.log(this.name,'student')
//这里就是 this的第三种情况:原型对象中共有方法里的this,将来调用这个共有方法的.前的那个子对象
}

\color{red}{ this的第三种情况:原型对象中共有方法里的this,将来调用这个共有方法的.前的那个子对象}

多态:
同一个函数,在不同情况下表现出的不同的状态。

面向对象小结:
1、封装: 创建对象,2种:
如果只创建一个对象: {} 如果反复创建多个相同结构的对象: 构造函数
2、继承: 所有子对象共用的属性值和方法,都要 放在构造函数的原型对象中
3、多态: 重写: 只要觉得从父对象继承来的成员 不要用,都在子对象中重写同名成员

this的几种情况:

    1. obj.fun() this->.前的obj对象
    2. new构造函数() this->new正在创建的新对象 
    3. 构造函数.prototype.fun=function(){}
        因为将来原型对象中的方法,都是”子对象.fun()”方式调用。 所以,this->将来调用这个fun函数的.前的某个子对象
    4. fun()、匿名函数自调和回调函数中的 this->window
    5. button.onclick=function(){}或button.addEventListener(“click”,function(){...}) DOM事件处理函数里的
        this-> 当前正在出发事件的.前的DOM元素对象。
    6. 箭头函数中的this->当前函数之外最近的作用域中的this
       - 几乎所有匿名函数都可用箭头函数简化
        - 箭头函数是对大多数匿名函数的简写
      箭头函数底层相当于.bind()  永久绑定外部this
    7. 改变this的指向
         其实,对于this,我们不一定逆来顺受
          • - 可用call或apply,临时替换一次函数中的this
          • - 可用bind,永久替换函数中的this
          总结:
          • a. 只在一次调用函数时,临时替换一次this: call
          • b. 既要替换一次this,又要拆散数组再传参: apply
          • c. 创建新函数副本,并永久绑定this: bind
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容