js深入学习（一）

目录

• 利用构造函数创建对象
• 构造函数原型prototype
• 对象原型__proto__
• constructor构造函数
  • JavaScript的成员查找机制（规则）
• 原型对象的this指向
• 原型对象的应用 扩展内置对象方法
• call方法的作用
• 面向对象编程OOP
• ES5新增方法
  • forEach()
  • filter()
  • some()
  • trim
  • Object.defineProperty()
  • Object.keys()

利用构造函数创建对象

构造函数是一种特殊的函数, 主要用来初始化对象, 即为对象成员变量赋初始值, 它总于new一起使用。它们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

new在执行时会做4件事:

1.在内存中创建一个新的空对象
2.让this指向这个新的对象
3.执行构造函数里面的代码，给这个新对象添加属性和方法
4.返回这个新对象(所以构造函数里面不需要return)

// 1.利用new Object()创建对象
var obj = new Object();
// 2.利用对象字面量创建对象
var obj2 = {}
// 3.利用构造函数创建对象
function Star(name, age) {
    this.name = name;
    this.age = age;
    this.sing = function () {
        console.log('我是' + this.name + '
年龄：' + this.age)
    }
}
var obj3 = new Star('me', 11);
obj3.sing();
// 实例成员只能通过实例化的对象来访问
console.log(obj3.name);
// 静态成员在构造函数本身上添加的成员 静态成员只能通过构造函数来访问，无法通过对象来访问
obj3.age = 1111;
obj3.sing();

构造函数原型prototype

构造函数通过原型分配的函数是所有对象共享的
JavaScript规定，每一个构造函数都由一个prototype属性，指向另一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法都会被构造函数所拥有。
我们可以把那些不变的方法直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法。

function Star(name, age) {
    this.name = name;
    this.age = age;
};
Star.prototype.sing = function () {
    console.log('我是' + this.name + '
年龄：' + this.age);
}
var obj3 = new Star('me', 11);
var obj4 = new Star('who', 12);
obj3.sing();      //我是me
                  //年龄：11
obj4.sing();      //我是who
                  //年龄：12
console.log('比较	', obj3.sing == obj4.sing);      //true

对象原型__proto__

对象都有一个属性__proto__指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在。
方法的查找规则:首先看本身对象身上是否有该方法,如果有就执行这个对象上的该方法
如果有，因为由__proto__的存在，就去构造函数原型对象prototype身上查找该方法

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

constructor构造函数

对象原型__proto__和构造函数prototype原型对象里面都有一个属性constructor属性，我们称为构造函数，因为它只会返回构造函数本身。
constructor主要用于记录该对象引用于哪个构造函数，他可以让原型对象重新指向原来的构造函数。

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

Star.prototype = {
    // 手动指向constructor
    constructor: Star,
    sing() {
        console.log('我是' + this.name + '
年龄：' + this.age);
    },
    movie() {
        console.log('2 我是' + this.name + '
年龄：' + this.age);
    }
}

JavaScript的成员查找机制（规则）

• 当访问一个对象的属性（包括方法）时，首先查找对象本身有没有
• 如果没有就查找的它的原型（也就是__proto__指向的prototype对象）
• 如果还没有就查找原型对象的原型（object的原型对象）
• 以此类推一直找到object为止（null）

原型对象的this指向

function Star(name, age) {
    this.name = name;
    this.age = age;
}
var that;
Star.prototype.sing = function () {
    console.log('我会唱歌');
    that = this;
}
var a = new Star('me', 111);
a.sing();
console.log(that === a);
console.log(that)

原型对象的应用 扩展内置对象方法

就是在原型对象上添加新方法
注意：数组和字符串内置对象不能给原型对象覆盖操作Array.prototype={},只能是Array.prototype.xxx=function{}的方式

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, 4];
console.log(arr.sum());

call方法的作用

function fn(x, y) {
  console.log('Hello,world');
  console.log(this);
  console.log(x + y);
}
var a = {
  name: 'me',
}
// call()可以调用函数
fn.call();
// call()可以改变函数的this指向
fn.call(o, 11, 2);

面向对象编程OOP

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

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

class Star {

}
console.log(typeof Star);
// 1.类的本质其实还是一个函数 可以认为它是构造函数的另一种写法
// (1)类有原型对象prototype
console.log(Star.prototype);
// (2)类原型对象prototype里面有constructor指向类本身
console.log(Star.prototype.constructor);
// (3)类可以通过原型对象添加方法
Star.prototype.sing = function () {
    console.log('冰雨');
}
var a = new Star();
console.dir(a);
// (4) 类创建的实例对象__proto__原型指向类的原型对象
console.dir(a.__proto__ === Star.prototype);

ES5新增方法

迭代(遍历)方法：forEach()、map()、filter()、some()、every()；

forEach()

array.forEach(function(currentValue,index,arr))

• currentValue:数组当前项的值
• index:数组当前项的索引
• arr:数组对象本身

// forEach 迭代(遍历)数组
var arr = [1, 2, 3, 4, 5, 6, 7, 8],
    sum = 0;
arr.forEach(function (value, index, arr) {
    console.log('当前数组元素' + value + ',当前数组元素的索引号' + index);
    sum += value;
});
console.log('arr的和	' + sum);

filter()

array.filter(function(currentValue,index,arr))

• filter()方法创建一个新的数组，新数组中的元素是通过检查数组中符合条件的所有元素,主要用于筛选数组
• 注意它直接返回一个数组
• currentValue:数组当前项的值
• index:数组当前项的索引
• arr:数组对象本身

// filter 筛选数组
var arr = [12, 77, 23, 2, 4, 21, 11];
var newArr = arr.filter(function (value, index, arr) {
    return value > 20;
})
console.log('filter 筛选	', newArr);

some()

some()方法用于检测数组中的元素是否满足指定条件
array.some(function(currentValue,index,arr))

• some()方法用于检测数组中的元素是否满足指定条件，通俗点 查找数组中是否有满足条件的
• 注意它返回值是布尔值，如果查找到这个元素，就返回true，如果查找不到就返回false
• currentValue:数组当前项的值
• index:数组当前项的索引
• arr:数组对象本身

// some 查找数组中是否有满足条件的元素
var arr = [12, 77, 23, 2, 4, 21, 11];
var newArr = arr.filter(function (value, index, arr) {
    return value == '2';
})
console.log(newArr);

trim

trim()会从一个字符串的两端删除空白字符
str.trim()
trim()方法并不影响原字符串的本身，它返回的是一个新的字符串

Object.defineProperty()

Object.defineProperty()定义对象中新属性或修改原有的属性
Object.defineProperty(obj,prop,descriptor)

• obj:必需。目标对象
• prop:必需。需定义或修改的属性的名字
• descriptor:必需。目标属性所拥有的特性

value:设置属性的值 默认underfined
writable:值是否可以重写。true|false 默认false
enumerable:目标属性是否可以被枚举。true|false 默认false
configurable:目标属性是否可以被删除或是否可以再次修改特性 true|false 默认false

var obj = {
    id: 1,
    name: 'me',
    price: 88888
}
Object.defineProperty(obj, 'other', {
    value: '添加属性',
})
console.log(obj);
Object.defineProperty(obj, 'name', {
    value: '修改name',
})
console.log(obj);

Object.keys()

Object.keys()用于获取对象自身所有的属性
Object.keys(obj)

• 效果类似for...in...
• 返回一个由属性名组成的数组

var obj = {
    id: 1,
    name: 'me',
    price: 88888
}
console.log('获取对象属性	', Object.keys(obj));