1.构造函数和原型

1.1 对象的三种创建方式--复习

字面量方式
```
var obj = {};
```
new关键字
```
var obj = new Object();
```

构造函数方式

function Person(name,age){
  this.name = name;
  this.age = age;
}
var obj = new Person('zs',12);

1.2 静态成员和实例成员

1.2.1 实例成员

实例成员就是构造函数内部通过 this 添加的成员如下列代码中 uname age sing就是实例成员，实例成员只能通过实例化的对象来访问。

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
    this.sing = function () {
        console.log('我会唱歌');
    }
}
var ldh = new Star('刘德华', 18);
console.log(ldh.uname); // 实例成员只能通过实例化的对象来访问

1.2.2 静态成员

静态成员在构造函数本身上添加的成员如下列代码中 sex 就是静态成员,静态成员只能通过构造函数来访问。

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
    this.sing = function () {
        console.log('我会唱歌');
    }
}
Star.sex = '男';
var ldh = new Star('刘德华', 18);
console.log(Star.sex);  // 静态成员只能通过构造函数来访问

1.3 构造函数的问题

构造函数方法很好用，但是存在浪费内存的问题。

在这里插入图片描述

1.4 构造函数原型 prototype

构造函数通过原型分配的函数是所有对象所共享的。

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。注意这个prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。

我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

例如：

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
}
Star.prototype.sing = function() {
    console.log(this.uname + "会唱歌");
}

var ldh = new Star("刘德华", 18);
var zxy = new Star("张学友", 19);
console.log(ldh.sing === zxy.sing); // true

运行结果：

在这里插入图片描述

1.5.对象原型

每个对象都会有一个 __proto__ 属性指向构造函数的 prototype 原型对象，之所以对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为有 __proto__ 原型的存在。

在这里插入图片描述

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
}
Star.prototype.sing = function() {
    return this.uname + "会唱歌";
}

var ldh = new Star("刘德华", 18);
console.log(ldh.__proto__ === Star.prototype);  // true

通过上面的代码可以得知，ldh.__proto__ 指向了 Star.prototype，所以它们是等价的

ldh.sing();

方法的查找规则：首先先看 ldh 对象身上是否有 sing() 方法，如果有就执行对象身上的方法，如果没有则通过 __proto__ 在构造函数原型对象上查找 sing() 方法。

注意：__proto__ 对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象 prototype。

1.6 constructor 构造函数

对象原型（__proto__）和构造函数原型对象（prototype）里面都有一个 constructor 属性，constructor 被称为构造函数，因为它指向构造函数本身。

constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。

一般情况下，对象的方法都在构造函数的原型中设置，如果有多个对象的方法，我们可以给原型采取对象形式赋值，但是这样会覆盖构造函数原型对象原来的内容，这样修改后的原型的 constructor 就不再指向当前构造函数了。此时，我们可以在修改后的原型中，添加一个 constructor 指向原来的构造函数。

如果我们修改了原来的原型，给原型赋值的是一个对象，则必须手动的利用 constructor 指回原来的构造函数如：

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
}

Star.prototype = {
    // 指回原来的构造函数
    constructor: Star,
    sing: function() {
        console.log("我会唱歌");
    },
    movie: function() {
        console.log("我会演电影");
    }
}

console.log(Star.prototype.constructor);
console.log(ldh.__proto__.constructor);

1.7 原型链

每个对象都有一个 __proto__ 属性，指向构造函数的原型，构造函数的原型也是一个对象，也有 __proto__ 属性，这样一层层往上找就形成了原型链。

在这里插入图片描述

1.8 原型链和成员的查找机制

任何对象都有原型对象，也就是 prototype 属性，任何原型对象都是对象，所以都有 __proto__ 属性，这样就形成了一条链，我们也称为原型链。

查找一个对象的方法（包括属性）时，首先查看这个对象自身包不包含这个方法。
如果没有就查找它的原型，也就是 __proto__ 指向的 prototype 原型。
如果还没有就查找原型对象的原型（Object 的原型对象）
直到查找到 null 为止。

总结：__proto__ 的意义在于给对象查找属性或方法提供了一个方向。

1.9 原型对象的 this 指向

构造函数中的 this 和原型对象的 this，都指向我们 new 出来的实例对象。

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
}
var that;
Star.prototype.sing = function() {
    console.log('我会唱歌');
    that = this;
}
var ldh = new Star('刘德华', 18);
ldh.sing();
// 1. 在构造函数中,里面this指向的是对象实例 ldh
console.log(that === ldh);//true
// 2.原型对象函数里面的this 指向的是 实例对象 ldh

执行结果：

在这里插入图片描述

1.10 通过原型为数组扩展内置方法

可以通过原型对象，对原来的内置对象进行扩展自定义的方法。比如给数组添加自定义求偶数和的功能。

// 原型对象的应用，扩展内置对象方法
 console.log(Array.prototype);
 Array.prototype.sum = function() {
     var sum = 0;
     for (var i = 0; i < this.length; i++) {
         sum += this[i];
     }
     return sum;
 }

 var arr = [1,2,3];
 console.log(arr.sum());

2.继承

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

2.1 call()

该方法可以调用函数，并且修改函数运行时的 this 指向

语法：

func.call(thisArg, arg1, arg2, ...);

func：需要调用的函数名
thisArg：当前调用函数 this 的指向对象
arg1、arg2：传递的参数

function func() {
    console.log(this);
    console.log("我喜欢喝手磨咖啡");
}
var lyman = {name: "lyman"};
func.call(lyman);   // 如果不传入参数，默认使用 window

2.2 子构造函数继承父构造函数中的属性

核心原理：通过 call() 把父类型的 this 指向子类型的 this，这样就可以实现子类型继承父类型属性。

例如：

// 1.父构造函数
function Father(uname, age) {
    this.uname = uname;
    this.age = age;
}

// 2.子构造函数
function Son(uname, age) {
    Father.call(this, uname, age);
}

var son = new Son("lyman", 22);
console.log(son);

2.3 借用原型对象继承方法

先定义一个父构造函数
再定义一个子构造函数
子构造函数继承父构造函数的属性和方法

function Father(uname, age) {
    this.uname = uname;
    this.age = age;
}

Father.prototype.money = function() {
    console.log(100000);
}

// 2.子构造函数
function Son(uname, age, score) {
    Father.call(this, uname, age);
    this.score = score;
}

// 这样直接赋值会有问题，如果直接修改了子原型对象，父原型对象也会被改变
// Son.prototype = Father.prototype;    
Son.prototype = new Father();
// 如果利用对象的形式修改了原型对象，别忘了利用 constructor 指回原来的构造函数
Son.prototype.constructor = Son;

Son.prototype.exam = function() {
    console.log("孩子要考试");
}

var son = new Son("lyman", 22, 100);
console.log(son);
son.money();
console.log(Father.prototype);
console.log(Son.prototype.constructor);

3.ES5 新增方法

3.1 数组方法

3.1.1 forEach

数组方法，遍历数组
语法：

arr.forEach(function(value, index, array) {
      //参数一是:数组元素
      //参数二是:数组元素的索引
      //参数三是:当前的数组
})
//相当于数组遍历的 for循环 没有返回值

例如：

// forEach 遍历数组
var arr = [1,2,3];
arr.forEach(function(value, index, arr) {
    console.log("每个数组元素：" + value);
    console.log("每个数组元素的索引：" + index);
    console.log("数组本身：" + arr);
})

3.1.2 filter

创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组。

语法：

arr.filter(function(currentValue, index, arr) {
    //参数一是:数组元素
    //参数二是:数组元素的索引
    //参数三是:当前的数组
})

例如：

// filter 筛选数组
var arr = [12, 66, 88];
var res = arr.filter(function(value, index, arr) {
    return value >= 20;
})
res.forEach(function(value, index, arr) {
    console.log(value);
})

3.1.3 some

该方法用于检测数组中是否有满足指定条件的元素，该方法的返回值是 boolean 类型，如果查找到满足条件的元素返回 true，否则返回 false。找到第一个满足条件的元素就会终止循环，不再继续查找。

语法：

arr.some(function(currentValue, index, arr) {
    //参数一是:数组元素
    //参数二是:数组元素的索引
    //参数三是:当前的数组
})

例如：

var arr = [10, 30, 4];
var res = arr.some(function(value, index, arr) {
    return value > 20;
})
console.log(res);

3.2 字符串方法

3.2.1 trim

该方法会从一个字符串的两端删除空白字符，删除完成后返回一个新的字符串，并不会影响原字符串。

语法：

str.trim();

例如：

var str = "     ly   man   ";
console.log(str.trim());
console.log(str);

3.3 对象方法

3.3.1 Object.keys

该方法用于获取对象自身的所有属性

例如：

Object.keys(对象名);

返回一个由属性名组成的数组。

例如：

var phone = {
    id: 1,
    pname: "小米",
    price: 1999,
    num: 2000
}

var arr = Object.keys(phone);
console.log(arr);

3.3.2 Object.defineProperty

该方法用于定义新属性或修改原有属性

语法：

Object.defineProperty(obj, prop, descriptor);

obj：目标对象
prop：需定义或修改的属性的名字（必须是字符串）
descriptor：目标属性所拥有的特性（必须是对象）

例如：

var phone = {
    id: 1,
    pname: "小米",
    price: 1999
}
Object.defineProperty(phone, "num", {
    value: 1000
});
console.log(phone);

除此之外还可以设置对象的属性是否可写、可枚举、可修改。

Object.defineProperty(对象，修改或新增的属性名，{
    value:修改或新增的属性的值,
    writable:true/false,//如果值为false 不允许修改这个属性值
    enumerable: false,//enumerable 如果值为false 则不允许遍历
    configurable: false  //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
})

JS 学习笔记 | 构造函数和原型

1.构造函数和原型

1.1 对象的三种创建方式--复习

1.2 静态成员和实例成员

1.2.1 实例成员

1.2.2 静态成员

1.3 构造函数的问题

1.4 构造函数原型 prototype

1.5.对象原型

1.6 constructor 构造函数

1.7 原型链

1.8 原型链和成员的查找机制

1.9 原型对象的 this 指向

1.10 通过原型为数组扩展内置方法

2.继承

2.1 call()

2.2 子构造函数继承父构造函数中的属性

2.3 借用原型对象继承方法

3.ES5 新增方法

3.1 数组方法

3.1.1 forEach

3.1.2 filter

3.1.3 some

3.2 字符串方法

3.2.1 trim

3.3 对象方法

3.3.1 Object.keys

3.3.2 Object.defineProperty

你可能感兴趣的:(JS 学习笔记 | 构造函数和原型)