高级JavaScript第（二）篇_小言_互联网的博客

高级JavaScript第（二）篇

2021-04-18 13:22 479人阅读评论(0)

文章目录

1、构造函数和原型

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

1、字面量方式

var obj ={
   };

2、new 关键字

var obj = new Objiect();

3、构造函数方式

function Person(name,age){
   
	this.name = name;
	this.age = age;
}
var obj = new Person('小hu同学')

1.2静态成员和实例成员

1.2.1 实例成员

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

function Star(uname,age){
   
	this.uname = uname;
	this.age = age;
	this.sing = function(){
   
	console.log('我会唱歌');
}
}
Star.sex ='男';
var xiaohu = new Star('小hu同学',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.eat = function(){
   
	console.log('吃牛排');
}
var xiaohu = new Star('小hu',18);
var xiaoming = new Star('小明',19);

xiaohu.eat();//吃牛排
xiaoming.eat();//吃牛排

1.5对象原型

对象都会有一个属性__proto__指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在。
__proto__对象原型和原型对象prototype是等价的。
__proto__对象原型的意义就在于为对象的查找机制提供一个方向，或者一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype

function Star(uname,age){
   
	this.uname = uname;
	this.age = age;
}
star.prototype.eat = function(){
   
	console.log('吃牛排');
}
var xiaohu = new Star('小hu',18);
var xiaoming = new Star('小明',19);

xiaohu.eat();//吃牛排
console.log(xiaohu);
console.log(xiaohu.__proto__ === Star.prototype);//true

1.6constructor构造函数

对象原型（__proto__）和构造函数（prototype）原型对象里面都有一个属性constructor属性，constructor我们称为构造函数，因为它指回构造函数

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

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

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

function Star(uname,age){
   
	this.uname = uname;
	this.age = age;
}
//很多情况下，我们需要手动的利用constructor这个属性指回原来的构造函数
Star.prototype ={
   
  //如果我们修改了原来的原型对象，
  //给原型对象赋值的是一个对象，则必须手动的利用constructor指回原来的构造函数
  constructor:Star,//手动的指回原来的构造函数
 eat:function(){
   
   console.log('我要吃牛排');
  },
  movie:function(){
   
	console.log('我要看电影');
 }
}
var xiaohu = new Star('小hu',18);
console.log(xiaohu)

以上代码运行结果，设置constructor属性如图：

如果未设置constructor属性，如图：

1.7原型链

每一个实例对象又有一个__proto__属性，指向的构造函数的原型对象，构造函数的原型对象也是一个对象，也有__proto__属性，这样一层一层往上找就形

1.8构造函数实例和原型对象三角关系

1、构造函数的prototype属性指向了构造函数原型对象
2、实例对象是由构造函数创建的，实例对象的__proto__属性指向了构造函数的原型对象
3、构造函数的原型对象的constructor属性也指向了构造函数

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

任何对象都有原型对象，也就是prototype属性，任何原型对象也是一个对象，该对象就有__proto__属性，这样一层一层往上走就形成了一条链，我们称为原型链

当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。
如果还没有就查找原型对象的原型（Object的原型对象）。
依此类推一直找到 Object 为止（null）。
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

1.10原型对象中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 xiohu = new Star('小hu',18);
//1、在构造函数中，里面的this指向的是对象实例 xiaohu
console.log(that === xiaohu);//true
//2、原型对象函数里面的this指向的是实例对象 小hu

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

Array.prototype.sum = function(){
   
	var  sum = 0;
	for(var i=0;i<this.length;i++){
   
 	sum += this[i];
}
return sum;
};
//此时数组对象中已经存在sum()方法了，可以始终数组sum()进行数据的请求

2、继承

2.1 call（）

call可以调用函数
calss可以修改this的指向，使用call()的时候参数一是修改后的this指向，参数2，参数3…使用逗号隔开连接

function fn(x,y){
   
	console.log(this);
	console.log(x + y);
}
var o ={
   
 name:'小hu'
};
fn.call(o,1,2);
//调用了函数此时的this指向了对象o

扩展一下。改变this指向的还有bind和apply。可以了解看看他们之间的区别是什么？（面试会问到的哟！）

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

1、先定义一个父构造函数
2、再定义一个子构造函数
3、子构造函数继承父构造函数的属性（使用call方法）

//1、父构造函数
function Father(uname,age){
   
	//this 指向父构造函数的对象实例
	this.uname = uname;
	this.age = age;
},
//2、子构造函数
function Son(uname,age,score){
   
 //this指向子构造函数的对象实例
 // 3、使用call方式实现子继承父的属性
 Father.call(this,uname,age);
 this.score = score;
}

var son = new Son('小hu同学'，15,50);
console.log(son);

2.3借用原型对象继承方法

先定义一个父构造函数
再定义一个子构造函数
子构造函数继承父构造函数的属性(使用call方法)

// 1. 父构造函数
function Father(uname, age) {
   
  // this 指向父构造函数的对象实例
  this.uname = uname;
  this.age = age;
}
Father.prototype.money = function() {
   
  console.log(100000);
 };
 // 2 .子构造函数 
  function Son(uname, age, score) {
   
      // this 指向子构造函数的对象实例
      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('刘德华', 18, 100);
  console.log(son);

3.ES5新增方法

3.1数组方法forEach遍历数组

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

3.2数组方法filter过滤数组

  var arr = [12, 66, 4, 88, 3, 7];
  var newArr = arr.filter(function(value, index,array) {
   
  	 //参数一是:数组元素
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value >= 20;
  });
  console.log(newArr);//[66,88] //返回值是一个新数组

3.3数组方法some

some 查找数组中是否有满足条件的元素 
 var arr = [10, 30, 4];
 var flag = arr.some(function(value,index,array) {
   
    //参数一是:数组元素
     //参数二是:数组元素的索引
     //参数三是:当前的数组
     return value < 3;
  });
console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环

第二篇就到这里了，后面的还在继续码字中…
由于时间比较赶有可能会有部分错字，或者错的地方，欢迎指出来纠正，码字不易，希望能一键三连！

转载：https://blog.csdn.net/weixin_45054614/article/details/115696086

查看评论

小言_互联网的博客

小言_互联网的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章