JavaScript-this指向、继承（构造函数和原型对象）、URI和http(s)

最新推荐文章于 2022-10-24 17:15:33 发布

Sco_Jing1031

最新推荐文章于 2022-10-24 17:15:33 发布

阅读量475

点赞数 4

分类专栏： JavaScript 文章标签： javascript 继承类 http url

本文链接：https://blog.csdn.net/m0_47109503/article/details/117441338

版权

JavaScript 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

文章目录

1. this关键字
- 1.1 案例：分析this指向
- 1.2 更改this的指向
2. 错误处理
3. 继承
- 3.1 借用构造函数继承父亲属性
- 3.2 利用原型对象继承父类方法
4. 类的本质
补充：
- URI和URL的区别：
- http和https的区别：

1. this关键字

构造函数中的this指的是新创建的对象，不代表这个类，指的是由类指针创建出来的对象
直接通过函数名调用函数（普通函数），this指的是全局对象window（构造函数只能通过new运算符调用，不能直接显示调用）
如果将函数作为对象的方法调用，this会指向该对象
普通函数中加不加this都可以，默认this指向window

1.1 案例：分析this指向

function foo() {
	return this
}
var o = {
	name: 'Jim',
	func: foo
}
console.log(foo() === window) //对应第二种情况，输出结果：true
console.log(o.func() === o)   //对应第三种情况，输出结果：true

1.2 更改this的指向

JavaScript 为专门提供了一些函数方法来处理函数内部 this 的指向问题，常用的有 bind()、call()、apply() 三种方法。
在这里插入图片描述
apply()方法和call()方法的区别：

function method(a, b) {
	console.log(a + b)
}
method.apply({}, ['1', '2'])  //数组方式传参，输出结果：12
method.call({}, '3', '4')     //参数方式传参，输出结果：34

bind()方法：

function method(a, b) {
	console.log(this.name + a + b)
}
var name = '张三'
var test = method.bind({ name: '李四' }, '3', '4')  //-->表示method方法绑定了{name:'李四'}对象，method中的this指向的就是{name:'李四'}的对象
method('1', '2')  //输出结果：张三12    -->该方法中的this指的是window
test()            //输出结果：李四34

2. 错误处理

try-catch语法：

try{
	可能会出现错误的代码
}catch(e ) {        //e--->出现错误的代码的错误类型
	错误出现后的处理代码
}

throw抛出错误对象案例演示：

try {
	var e1 = new Error('错误信息')  //创建错误对象
	throw e1  //抛出错误对象，也可以与上一行合并为：throw new Error('错误信息')
} catch (e) {
	console.log(e.message)  //输出结果：错误信息
	console.log(e1 === e)  //判断e1和e是否为同一个对象，输出结果为：true
}

错误类型：

类型	说明
Error	普通错误，其余6种类型的错误对象都继承自该对象
EvalError	调用eval()函数错误，已经弃用，为了向后兼容，低版本还可以使用
RangeError	数值超出有效范围，如“new Array(-1)"
ReferenceError	引用了一个不存在的变量，如“var a = 1; a + b"（变量B未定义）
SyntaxError	解析过程语法错误，如" { ; } " “if()” “var a = new”
TypeError	变量或参数不是预期类型，如调用了不存在的函数或方法
URIError	解析URI编码出错，调用encodeURI()、escape()等URI处理函数时出现

3. 继承

ES6之前并没有提供 extends 继承。可以通过构造函数+原型对象模拟实现继承，被称为组合继承

call()：
作用：调用这个函数，并且修改函数运行时this指向将父类的this指向子类的this，实现子类继承父类的属性
实例对象：使用new运算符，调用构造函数创建的对象

3.1 借用构造函数继承父亲属性

原理：通过call()方法将父类的this指向子类的this，实现子类继承父类的属性
实例对象：使用new运算符，调用构造函数创建的对象

function Father(uname, age) { //Father构造函数是父类
	//this指向父构造函数的对象实例
	this.uname = uname
	this.age = age
}
function Son(uname, age, score) { //Son构造函数是子类
	//this指向子构造函数的对象实例
	//将父构造函数的属性拿过来调用（实现父构造函数的借用），即实现对父构造函数的继承
	Father.call(this, uname, age) //子类继承父类的属性
	this.score = score            //子类可以拥有自己的特有属性
}
var son = new Son('张三', 18, 100)
console.log(son)   //输出结果：Son{uname:'张三',age:18,score:100}

ES6中继承父亲属性：

// 使用super继承（ES6）
class Father {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}
class Son extends Father {
    constructor(name, age, score) {
        super(name, age)
        this.score = score
    }
}
var son = new Son('张三', 20, 90)
console.log(son)  //输出结果：Son {name: "张三", age: 20, score: 90}

3.2 利用原型对象继承父类方法

一般情况下，对象的方法都在构造函数的原型对象中设置，通过构造函数无法继承父类方法。

原型对象继承父类方法：将父类的实例对象作为子类的原型对象来使用

核心原理：

将子类所共享的方法提取出来，让子类的 prototype 原型对象 = new 父类()
本质：子类原型对象等于是实例化父类，因为父类实例化之后另外开辟空间，就不会影响原来父类原型对象
将子类的 constructor 从新指向子类的构造函数

function Father() { }
Father.prototype.money = function () {
	console.log(100000)
}
function Son() { }
//Son.prototype = Father.prototype   //这样直接赋值会有问题，如果修改了子原型对象，父原型对象也会跟着一起变化
Son.prototype = new Father()  //将父类的实例对象作为子类的原型对象
//这个是子构造函数专门的方法
//如果利用对象的形式修改了原型对象，别忘了利用constructor 指回原来的原型对象
Son.prototype.constructor = Son  //将原型对象的contructor属性指向子类
new Son().money()  //调用父类的money()方法，输出结果：100000
Son.prototype.exam = function () { }  //为子类增加exam()方法
console.log(Father.prototype.exam)  //子类不影响父类，输出结果：undefined

原型链示意图：
在这里插入图片描述
class语法的本质：类和构造函数的使用非常相似，可以互相替代

<script>
    class Person { }
    console.log(Person.prototype)  //类也有原型对象
    Person.prototype.money = function () {  //类也可以增加方法
        console.log(100000)
    }
    new Person().money()  //输出结果：100000
</script>

4. 类的本质

ES6之前通过构造函数+原型实现面向对象编程
ES6通过类实现面向对象编程

class本质还是function，也可以简单认为类就是构造函数的另一种写法
构造函数的特征：

构造函数有原型对象prototype
构造函数原型对象prototype里面有constructor指向构造函数本身
构造函数可以通过原型对象添加方法
构造函数创建的实例对象由__proto__原型指向构造函数的原型对象

类的所有方法都定义在类的prototype属性上
类创建的实例,里面也有proto 指向类的prototype 原型对象
类可以通过原型对象来添加方法
所以ES6的类它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
所以ES6的类其实就是语法糖.
语法糖:语法糖就是一种便捷写法. 简单理解, 有两种方法可以实现同样的功能, 但是一种写法更加清晰、方便,那么这个方法就是语法糖

补充：

URI和URL的区别：

URI，是uniform resource identifier，统一资源标识符，用来唯一的标识一个资源。
URL是uniform resource locator，统一资源定位器，它是一种具体的URI，即URL可以用来标识一个资源，而且还指明了如何locate这个资源。
也就是说，URI是以一种抽象的，高层次概念定义统一资源标识，而URL和URN则是具体的资源标识的方式。URL和URN都是一种URI。