学习javaScript必知必会(7)~Object类、修改this指向、继承关系

简介: 学习javaScript必知必会(7)~Object类、修改this指向、继承关系

一、Object 类 (是所有类的父类/基类)

1、使用Object 定义对象,无需定义类的构造器

var p = new Object();


2、为什么说Object是所有类的父类?

因为当类被系统加载时,创建出该类对应的原型对象,如何创建类的原型对象呢?

类名.propotype = new Object();

即类的原型对象就是Object的一个实例


二、修改this指向(使用call或apply方法)

1、语法:

call(thisObject, arg1, [, arg2,arg3…]) 第一个参数即this的指向(除了第一个参数外,其他参数都是可选的)

apply(this, [, arg1, arg2, arg3…]) 第一个参数即this的指向(除了第一个参数外,其他参数都是可选的)


2、call、apply【bind】的作用: 将函数内部的this指向第一个参数,然后调用函数的执行

■ 举例1:

<input type="button" name="name" value='点一下' id="btn"/>
<input type="button" name="name" value='改变点一下的颜色' id="btn2"/>
<script>
function f1(color) {
    this.style.color = color;
}
window.onload = function (){
    document.getElementById('btn2').onclick = function () {
        var btn = document.getElementById('btn');
        // f1.call(btn, 'blue');
        f1.apply(btn, ['blue']);
    }
}
</script>


■ 举例2:


image.pngimage.png


■ 相当于在this的指向者(某个对象p)下增加了一个方法属性(fn):

//通过使用call方法,让this指向p
        // var p = {};
        // fn.call(p);
        //其实相当于在json对象内添加了一个属性
        var p = {
            fn : function () {
                console.log(this);
            }
        }
        p.fn();


■ 介绍一下bind、call、apply原理(三者原理是一样的)

(这里以call例)

//call的作用,修改this指向,并且执行函数
//(1)call是方法的原型对象上的属性【方法属性】,所以调用者是函数,才可以执行函数
// (2) call的第一个参数是对象obj,让this指向该对象
  Function.prototype.newCall = function (obj) {//原理:给某个对象添加一个属性指向this
       obj.p = this;//让this【call函数的调用者函数】赋值给该对象的某个属性(要保护该对象原来的其他属性)
       obj.p();//执行该函数(call函数的调用者函数)
        delete obj.p;//执行完方法(call函数的调用者函数),删除掉新加的方法属性
  }


//call原理的实现的细节:
 Function.prototype.newCall = function (obj) {//原理:给某个对象添加一个属性指向this
     //判断第一个参数是否为null
     var obj = obj || window;    
     obj.p = this;//让this【call函数的调用者】赋值给该对象的某个属性(要保护该对象原来的其他属性)
     //call的调用者函数的参数处理
     var newArguments = [];
     for(var i = 1; i < arguments.length; i++){
         newArguments.push('arguments[' + i + ']');
     }
     //执行该函数(call函数的调用者函数),并且通过eval将结果拼接,然后返回执行结果
     var result = eval('obj.p(' + newArguments + ')');
     delete obj.p;//执行完方法(call函数的调用者函数),删除掉新加的方法属性
     return result;
 }


❀ 给call的作用打个比方:

一个中间商(call的第一个参数-对象)走在路上,看到一个LED灯(call函数的调用者函数),先用自己的购物袋(对象的某个属性),装上该LED灯,然后,没啥事干,中间商打开LED灯开关,LED灯发出红外光(call的调用者函数的执行),中间商觉得这个灯对自己没那么重要,没必要一直带着,就扔掉删除属性)了。


三、继承关系

1、通过原型prototype进行扩展Object类

2、使用call、apply,改变this的指向进行扩展

3、原型继承 子类.prototype = new 父类();

■ 举例:

<script>
function Person(name, age) {
   this.name = name;
   this.age = age;
   this.speak = function () {
       alert('hello');
   }
}
function Student(num, name){
    this.num = num;
    this.name = name;
    this.hobby = function (){
        alert('game');
    }
}
//通过类的原型prototype继承父类Person
Student.prototype = new Person('小明', 16);
var stu = new Student();
stu.speak();
console.log(stu.age);
</script>



6.png


目录
相关文章
|
9月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
9月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
10月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
374 0
|
12月前
|
安全 IDE Java
重学Java基础篇—Java Object类常用方法深度解析
Java中,Object类作为所有类的超类,提供了多个核心方法以支持对象的基本行为。其中,`toString()`用于对象的字符串表示,重写时应包含关键信息;`equals()`与`hashCode()`需成对重写,确保对象等价判断的一致性;`getClass()`用于运行时类型识别;`clone()`实现对象复制,需区分浅拷贝与深拷贝;`wait()/notify()`支持线程协作。此外,`finalize()`已过时,建议使用更安全的资源管理方式。合理运用这些方法,并遵循最佳实践,可提升代码质量与健壮性。
381 1
课时78:Object类的基本概念
Object类的主要特点是可以解决参数的统一问题,使用object类可以接受所有的数据类型。 1. Object类简介 2. 观察Object类接收所有子类对象 3. 使用Object类接收数组
235 0
|
JSON Java Apache
Java基础-常用API-Object类
继承是面向对象编程的重要特性,允许从已有类派生新类。Java采用单继承机制,默认所有类继承自Object类。Object类提供了多个常用方法,如`clone()`用于复制对象,`equals()`判断对象是否相等,`hashCode()`计算哈希码,`toString()`返回对象的字符串表示,`wait()`、`notify()`和`notifyAll()`用于线程同步,`finalize()`在对象被垃圾回收时调用。掌握这些方法有助于更好地理解和使用Java中的对象行为。
221 8
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
198 2
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
215 1
|
前端开发 JavaScript
web前端-JavaScript中的call、apply和bind方法(改变this指向)
文章目录 每日推荐 正文开始 call()和apply() bind()() call、apply和bind方法的区别 相同点 不同点 this指向的四种情况总结
web前端-JavaScript中的call、apply和bind方法(改变this指向)