this指向问题,JS高级_继承,瀑布流,面向对象

75 阅读4分钟

一、this指向

改变this指向有些方法?他们有什么区别呢?

每个Function构造函数的原型prototype, 都有方法 call(), apply(), bind()

call():

语法:函数名.call(调用者,参数1,...)

作用:函数被借用时,会立即执行,并且函数体内的this会指向借用者或调用者

apply():

语法:函数名.apply(调用者, [参数, …])

作用:函数被借用时,会立即执行,并且函数体内的this会指向借用者或调用者

apply() 与call() 非常相 似, 不同之处在于提供参数的方式, apply() 使用参数数组, 而不是参数列表

bind():

语法:函数名.bind(调用者, 参数, …)
作用:函数被借用时,不会立即执行,而是返回一个新的函数。需要自己手动调用新的函数来改变this指向

总结:

相同点:

  1. 三者都可以把一个函数应用到其他对象身上,不是自身对象 不同点:
  2. call,apply是直接执行函数调用。bind是绑定,执行需要再次调用。
  3. call,bind接收逗号分隔的无限个参数列表;apply接收数组作为参数。

call方法在调用的时候会执行函数 第一个参数是this的指向 第二个参数以及后面的参数>都是需要传的参数 返回值是原函数中定义的返回值

apply方法在调用的时候也会执行函数 第一个参数是this的指向 第二个参数是数组 其中是>需要传递的参数 返回值是原函数中定义的返回值

bind方法在调用的时候不会执行函数 第一个参数是this的指向 第二个参数以及后面的参数>都是需要传的参数 返回值是一个新的函数

二、JS高级_继承

什么是继承?

8d212e85006b45a9afbbb462203a919f_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.webp

继承是 OO 语言中的一个最为人津津乐道的概念。许多OO 语言都支持两种继承方式: 接口继承和实现继承。其实现继承主要是依靠原型链来实现继承的
基于原型链继承

利用原型让一个引用类型继承另一个引用类型的属性和方法。

每个构造函数都有一个原型对象, 原型对象都包含一个指向构造函数的指针, 而实例都包含一个指向原型对象的内部指针

Snipaste_2023-03-11_11-38-17.png

继承属性和方法,组合继承:

function People(uname, age) {
            this.uname = uname
            this.age = age
        }
        People.prototype.sayHi = function() {
            console.log('你好');
        }
        function Student(uname, age, school) {
            People.call(this, uname, age)
            this.school = school
        }
        // Student继承People的uname,age,sayHi()
        Student.prototype = new People()
        Student.prototype.constructor = Student
        Student.prototype.goSchool = function() {
            console.log(this.uname + ':' + this.age + "去上学");
        }
        function ChildStudent(uname, age, school, sing) {
            Student.call(this, uname, age, school)
            this.sing = sing
        }
        // 将Student()的隐式原型赋值给  ChildStudent的原型
        ChildStudent.prototype = new Student() 
        ChildStudent.prototype.constructor = ChildStudent
​
        ChildStudent.prototype.sing1 = function() {
            console.log("唱歌");
        }
        var xg = new Student('小刚', 18, '第二中学')
        xg.sayHi()
        xg.goSchool()
        var xm = new People('小明', 18, )
        xm.sayHi()
​
        var zs = new ChildStudent('张三', 10, '第七小学', '孤勇者')
        console.log(zs);
        zs.sayHi()
​

详情可以参考大佬:juejin.cn/post/684490…

三、瀑布流

概念:  瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局。(即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,依次按照规则放入指定位置。)

瀑布流的效果图:

Snipaste_2023-03-13_19-20-30.png

四、面向对象

面向对象的三大特征 :封装、继承、多态
利用封装、继承、多态的方式去建模,从而大量减少重复代码、降低模块间耦合,像拼积木一样组装了整个“世界”。
封装:
封装好的类如同一个黑匣子,外部无法看到内部的构造及运转机制,而只能访问其暴露出来的属性或方法
继承:
继承可以使父类的属性和方法延续到子类中,这样子类就不需要重复定义这些属性和方法,并且子类可以通过重写来修改继承而来的方法实现,或者通过追加达到属性与功能扩展的目的

我们知道任何类都有一个toString()方法,但我们根本没有声明它,这是为什么呢?其实这是从Object类继承的方法,因为Object是一切类的祖先类。

多态:
在我们创建对象的时候通常会再定义一个引用指向它,以便后续进行对象操作,而这个引用的类型则决定着其能够指向哪些对象、
实现多态的方式:
  1. 覆盖:是指子类重新定义父类的虚函数的做法。
  2. 重载,是指允许存在多个同名函数,而这些函数的参数表不同(或许参数个数不同,或许参数类型不同,或许两者都不同)。
实现多态的作用:

多态化的外设使计算机功能更加强大、灵活、可扩展、可替换。其实这就是设计模式中非常重要的一种“策略模式”,接口的定义是解决耦合问题的关键所在

大家有兴趣的可以参考一下大佬的文章:juejin.cn/post/716584…