• ES6中的原型对象


    1、原型链

    对象的原型(__proto__)->Star原型对象;

    Star原型对象的原型(__proto__)->Object原型对象;

    Object原型对象的原型(__proto__)->null;

    2、对象成员的查找规则

     按照“原型链”查找;

    先看对象上是否有该成员;如果对象成员没有,则去Star原型对象上查找;Star原型对象没有,去Object原型(null)上查找......,没有则返回undefined;

    如果对象上有,原型对象上也有,则返回对象上的成员(就近原则);

    3、原型对象this指向

    原型对象中this的指向:谁调用原型对象中的函数,this就指向谁(实例对象);

    4、扩展内置对象方法

    1. <script type="text/javascript">
    2. //原型对象的应用,扩展内置对象方法
    3. console.log(Array.prototype);
    4. Array.prototype.sum = function(){
    5. var sum = 0;
    6. for(var i=0;i<this.length;i++)
    7. {
    8. sum += this[i];
    9. }
    10. return sum;
    11. }
    12. //var arr = [1,2,3];
    13. var arr1 = new Array(1,2,3);
    14. console.log(arr.sum());//根据原型链进行查找
    15. console.log(Array.prototype);
    16. </script>

    运行结果:

     数组和字符串内置对象不能给原型对象覆盖操作Array.prototype={},只能是Array.prototype.xx=function(){}方式。

    5、call方法的作用

    调用这个函数,并且修改函数运行时的this指向。

    fun.call(thisArg,arg1,arg2,...)
    • thisArg:当前调用函数的this对象;
    • arg1,arg2:参数;
    1. <script type="text/javascript">
    2. var o ={
    3. name:'fang'
    4. }
    5. function fn(x,y){
    6. console.log("this is call demo");
    7. console.log(this);//this本来是指向window(window.fn())
    8. console.log(x+y);
    9. }
    10. fn.call();//1、可以调用fn函数;
    11. fn.call(o,2,3);//2、改变this指向,指向o这个对象
    12. </script>

    运行结果:

    6、利用构造函数继承父类的属性和方法

    1、继承属性

     通过call()把父类型的this指向子类型的this,这样就可以实现子类型继承父类型的属性。

    1. <script type="text/javascript">
    2. function Father(uname,age){
    3. //this指向父类构造函数的对象实例
    4. this.uname = uname;
    5. this.age =age;
    6. }
    7. function Son(uname,age){
    8. //this指向子类构造函数的对象实例
    9. Father.call(this,uname,age);
    10. }
    11. var son1 = new Son('liming',25);
    12. console.log(son1);
    13. </script>

    运行结果:

     2、继承方法

    1. <script type="text/javascript">
    2. function Father(uname,age){
    3. //this指向父类构造函数的对象实例
    4. this.uname = uname;
    5. this.age =age;
    6. }
    7. Father.prototype.money = function()
    8. {
    9. console.log("make money");
    10. }
    11. function Son(uname,age){
    12. //this指向子类构造函数的对象实例
    13. Father.call(this,uname,age);
    14. }
    15. Son.prototype = new Father();//将子类的原型执行父类的实例对象
    16. Son.prototype.constructor = Son;
    17. Son.prototype.exam = function(){
    18. console.log("exam :100");
    19. }
    20. var son1 = new Son('liming',25);
    21. console.log(son1);
    22. console.log(Father.prototype);
    23. </script>

    运行结果:

     7、遍历数组

    1、forEach()

    array.forEach(function(currentValue,index,arr))
    • CurrentValue:数组当前项的值
    • index:数组当前项的索引
    • arr:数组对象本身
    1. <script type="text/javascript">
    2. var arr =[1,2,3];
    3. var sum =0;
    4. arr.forEach(function(value,index,array){
    5. sum+=value;
    6. });
    7. console.log("sum:"+sum);
    8. </script>

    2、filter() 筛选数据 

    array.filter(function(currentValue,index,arr))
    • filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组。
    • 它直接返回一个新数组。
    • currentValue:数组当前项的值
    • index:数组当前项的索引
    • arr:数组对象本身
    1. <script type="text/javascript">
    2. var arr =[61,12,83];
    3. var newArr = arr.filter(function(value,index,array){
    4. return value >= 20;
    5. });
    6. console.log("newArr:"+newArr);
    7. </script>

    运行结果:

    3、forEach和some区别

    1. var arr =['red','green','blue'];
    2. arr.some(function(value,index,array){
    3. if(value == 'green'){
    4. console.log("find ");
    5. return true;//在some里遇到return就会终止遍历,迭代效率更高。
    6. }
    7. console.log("value:"+value);
    8. });

    8、字符串方法

    trim()方法会从一个字符串的两端删除空白字符

    str.trim()
    • trim()方法并不影响原字符串本身,它返回的是一个新的字符串。
    1. <script type="text/javascript">
    2. var str = ' liming ';
    3. console.log('str:'+str);
    4. var newStr = str.trim();
    5. console.log("newStr:"+newStr);
    6. </script>

    9、对象方法

    Object.defineProperty()定义对象中新属性或修改原有属性。

    Object.defineProperty(obj,prop,descriptor)
    • obj:必需。目标对象。
    • prop:必需。需定义或修改的属性定义
    • descriptor:必需。描述

    descriptor定义:以对象形式{}书写

    • value:设置属性的值,默认为undefined
    • writalbe:值是否可以重写。true|false(默认是false)
    • enumerable:目标属性是否可以被枚举。true|false(默认是false)
    • configurable:目标属性是否可以被删除或是否可以再次修改特性ture|false(默认false)
    1. <script type="text/javascript">
    2. var obj ={
    3. id:1,
    4. name:'huawei',
    5. price:1000
    6. };
    7. Object.defineProperty(obj,'id',{
    8. value:2,
    9. writable:false,
    10. });
    11. Object.defineProperty(obj,'address',{
    12. value:'shandong china',
    13. enumrable:false,
    14. configurable:false,//address不允许被删除
    15. });
    16. console.log(Object.keys(obj));//找不到address
    17. delete obj.address;
    18. console.log(obj);//address不允许被删除
    19. delete obj.name;
    20. console.log(obj);//name允许被删除
    21. </script>

    运行结果:

     

  • 相关阅读:
    在win10里顺利安装了apache2.4.41和php7.4.29以及mysql8.0.33
    python之BeautifulSoup库
    Ethersacn的交易数据是什么样的(2)
    webpack:详解entry和output一些重要API的使用
    3、乐趣国学—“色难”
    BUUCTF刷题十一道(08)
    电玩体验店怎么计时,佳易王ps5计时计费管理控制系统操作教程
    【Github】将本地仓库同步到github上
    应用现代化产业联盟,正式成立
    Dubbo:服务调用
  • 原文地址:https://blog.csdn.net/qq_34754747/article/details/125595165