欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-12 09:08:56
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 S...

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);

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

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

相关标签: javascript