1.前言
虽然现在已经是21年7月,但是
es6还是没有那么的普及,所有简单梳理下 一些常用的知识点
2. new
基础构造函数结构
function Person(name, age) { // this是谁 console.log(this); this.name = name; this.age = age; // return this; }
构造函数调用 应该叫创建实例了
Person(); //window
window.Person() Person()当普通函数调用 里面的this就是window
new 关键字的作用
1.创建了一个对象
- 修改
this指向把构造函数this的指向修改为指向当前创建的对象
3.把这个新对象 return出去
- 执行构造函数的代码
3. 构造函数 原型
还是上文的 构造函数
3.1 原型
每当定义一个对象（函数也是对象）时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个
prototype属性，这个属性指向函数的原型对象，使用原型对象的好处是所有对象实例共享它所包含的属性和方法
3.2 原型链
- 原型链的出现 主要是解决继承问题
2.每个对象拥有一个原型对象，通过
proto指针指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向null(Object.proptotype.__proto__指向的是null)。这种关系被称为原型链(prototype chain)，通过原型链一个对象可以拥有定义在其他对象中的属性和方法
- 构造函数
Parent、Parent.prototype和 实例p的关系如下:(p.__proto__ === Parent.prototype)
var person1 = new Person("杜甫", 18); console.log("person1",person1) //{name:"杜甫,age:18} // 原型是被所有实例共享的 测试在添加个属性 person1 也能打印出来 console.log(person1, person1.__proto__, Person.prototype); // 对象比较 比的是地址 同一个对象 console.log(person1.__proto__ === Person.prototype);
person1.__proto__:通过实例对象 查看原型
Person.prototype:通过构造函数名 查看原型
3.3 prototype 和 proto 区别是什么？
1.
prototype是构造函数的属性2.
__proto__是每个实例都有的属性，可以访问prototype属性3.实例的
__proto__与其构造函数的prototype指向的是同一个对象
4. 原型
JavaScript的原型是为了实现对象间的联系，解决构造函数无法数据共享而引入的一个属性，而原型链是一个实现对象间联系即继承的主要方法
Person.prototype.sex = "男"; // 原型上的属性 sex和实例上的 属性 name有什么区别 // 和实例上的属性 name 有什么区别 console.log(person1.name, person1.sex); var person2 = new Person("李白", 28); console.log(person2.name, person2.sex);
.属性先看自己有没有 没有往上层原型上找 都没有未定义
5. 顶层原型
// 最顶层原型Object // 给最顶层原型链添加 Object.prototype.hobby = "写代码"; console.log(person1.hobby); //只要在js里面都有这个属性 console.log(document.hobby); console.log(document.body.hobby); var a = [], b = 10, c = "abc"; console.log(a.hobby, b.hobby, c.hobby);
6. vue里面 旧版的用法
vue.prototype.baseUrl = "http://" // this.baseUrl vue.prototype.$http = axios //this.$http.get().then().catch()
7. 类
查看数组的原型
实例上 放属性
原型上 放函数
点类
class Point { // 构造函数:类的一部分 // 通过类实例化一个对象被执行的函数就是构造函数 constructor(x, y) { console.log("我被创建了...", x, y); this.x = x; this.y = y; } // 自定义函数 自动保存到原型上 对象上没有 原型上有了 // 相当于 Peron.prototype.sayHi = function sayHi() { // this:谁调用,就是谁 console.log(`我的位置:x=${this.x}`); } }
点类的实例
var point1 = new Point(10, 20); console.log(point1); // 但是没有输出 加上参数 point1.sayHi(); var point2 = new Point(100, 200); point2.sayHi();
8.继承
class ColorPoint extends Point { // 子类的构造函数会覆盖父类的构造函数,必须手动调用父类构造函数 // 不走父类的构造函数 没创建父类 ,就没有了父类的属性和方法 constructor(x, y, color) { super(x, y); // 调用父类构造函数 super父类的意思 // 自己只保存自己新增的属性 this.color = color; // this.x = x; // this.y = y;//可以,但是没必要,我们继承 调父类就是为了省事 console.log("colorPoint 构造函数"); } }
彩色点的 实例
// 先走自己的构造函数 在走父类 var color1 = new ColorPoint(11, 22, "red"); console.log(color1); color1.sayHi();
