当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 关于JS中this指向和ES5中常用的方法

关于JS中this指向和ES5中常用的方法

2020年07月17日  | 移动技术网IT编程  | 我要评论

this指向和继承 ,ES5部分方法

)

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

构造函数中的方法调用，明确了this指向，此时的this就是new出来的实例对象

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

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

3.继承 – call( )

  • call()可以调用函数
  • call()可以修改this的指向,使用call()的时候 参数一是修改后的this指向,参数2,参数3…使用逗号隔开连接
function fn(x, y) {
     console.log(this);
     console.log(x + y);
}
  var o = {
  	name: 'andy'
  };
  fn.call(o, 1, 2);//调用了函数此时的this指向了对象o

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

  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('小锋锋', 18, 100);
 console.log(son);

5.借用原型对象继承方法

  1. 先定义一个父构造函数
  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);

在这里插入图片描述

ES5新增方法

1.数组方法forEach遍历数组

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

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.数组方法some

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

4.some和forEach区别

  • 如果查询数组中唯一的元素, 用some方法更合适,在some 里面 遇到 return true 就是终止遍历 迭代效率更高
  • 在forEach 里面 return 不会终止迭代

5.trim方法去除字符串两端的空格

当用户在表单输入内容，有时会获取到空格内容，比如账号密码，如何解决这个问题呢？

var str = '   用户名   '
console.log(str.trim())

此时就能完美解决获取到的空格问题。

本文地址：https://blog.csdn.net/supervillain2/article/details/107367940

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网