【javascript】进阶语法【上】

function Father(uname,age){
    this.uname=uname;
    this.age=age;
};
function Son(uname,age,score){
    //此时这个Father构造函数里面的this指向Son构造函数中的this
    Father.call(this,uname,age);//这个this表示son构造函数中的this，指向Son的实例对象
    this.score=score;
};
var son=new Son('lisi',19,100);
console.log(son.uname);//lisi
console.log(son.age);//19
console.log(son.score);//100

借用原型对象继承父类型方法

①将父类的原型对象赋值给子类的原型对象

存在问题：当想要给子类的原型对象添加独有的方法时候，父类也会有该方法，因为子原型对象指向父原型对象，此时子原型对象改变会影响父原型对象

function Father(){

};
Father.prototype.sing=function(){
    console.log('我会唱歌');
}
function Son(){

}
//存在问题，以下是引用类型赋值，传递的是地址，
// 当某一个改变，则另一个也要改变
//当给Son声明一个单独特殊的money方法时,Father也有了该方法，
// 所以这导致无法给子类添加特殊的方法
Son.prototype=Father.prototype;
Son.prototype.money=function(){
        console.log('一百元');
    }
var father=new Father();
var son=new Son();
console.log(son.sing());
console.log(father.money());

②将实例化父构造函数赋值给子类的原型对象

因为上面是通过对象形式修改了原型对象，所以下一步要利用constructor指回原来的构造函数

function Father(){

};
Father.prototype.sing=function(){
    console.log('我会唱歌');
}
function Son(){

}
//将子类的原型对象指向父类的实例对象
// 再将子类原型对象的constructor指向子类的构造函数
Son.prototype=new Father();
Son.prototype.constructor=Son;

Son.prototype.money=function(){  //子类独有的方法
        console.log('一百元');
    }

var son=new Son();

console.log(son.sing());

四、ES5新增的方法

1.数组方法

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

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

currentValue:数组当前项的值

index:数组当前项的索引

arr:数组对象本身

总是返回undefined

注意：forEach()对于空数组是不会执行里面的回调函数function

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

currentValue:数组当前项的值

index:数组当前项的索引

arr:数组对象本身

注意：filter()方法创建一个新数组，新数组的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组，它返回的是一个新数组

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

currentValue:数组当前项的值

index:数组当前项的索引

arr:数组对象本身

注意：some()方法用于检测数组中的元素是否满足指定条件，查找数组中是否有满足条件的元素，它返回的是布尔值，如果找到，返回true，找不到返回false

找到第一个满足条件的元素，就终止循环，不再继续查找

如果查询数组中唯一的元素，用some方法更合适

some、forEach、filter的区别

forEach的return不会终止迭代 return true 和return false都类似continue

some的return会终止迭代 return true 类似break return false类似continue

filter的return不会终止迭代 return true 和return false 都类似continue

2.字符串方法

str.trim()

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

并不影响原字符串本身，它返回的是一个新的字符串

3.对象方法

Object.keys(obj)

用于获取对象自身的属性

效果类似for...in

返回一个属性名组成的数组

Object.defineProperty(obj,prop,descriptor)

定义新属性或修改原有的属性

obj:目标对象

prop:需定义或修改的属性名字

descriptior:目标属性所拥有的特效

书写方式：对象形式，

有关属性：

value 值默认是undefined

writable true或false //表示是否可修改这个属性值默认是false

enumerable: true或false //表示是否可枚举默认是false

configurable: true或false //表示是否可被删除或是否可以再次修改特性默认是false

五、函数的定义和调用

1.函数的定义

函数声明方式function关键字（命名函数）
函数表达式（匿名函数）
new Function(‘参数1’，’参数2’，’函数体’)

Function里面的参数都必须是字符串格式

执行效率低，也不方便书写，因此较少使用

所有函数都是Function的实例（对象）

函数也属于对象

2.函数的调用和this指向

普通函数函数名() 函数名.call() this指向 window

对象的方法对象名.函数名() this指向对象

构造函数 new 构造函数名() this指向实例对象原型对象的方法this也指向实例对象

绑定事件函数触发事件 this指向绑定事件对象即调用者

定时器函数时间到了自动调用 this指向window

立即调用函数自动调用 this指向window

3.改变函数内部this指向

call(thisArg,args1,args2)方法

call() 调用这个函数，并且修改函数运行时的this指向

thisArg：当前调用函数this的指向对象

arg1,arg2：传递的其他参数

调用一个函数，调用函数的方式，但是它可以改变函数的this指向

作用：实现继承

function fn(){
    console.log("你好");
};
var o={
    name:"andy"
};
fn.call(o);//此时这个fn()函数里面的this指向了o这个对象

apply(thisArg,argsArray)方法

调用一个函数，调用函数的方式，但是它可以改变函数的this指向

thisArg：当前调用函数this的指向对象

argsArray:传递的值，必须包含在数组里面（伪数组）

返回值就是函数的返回值，因为它就是调用函数

求数组的最大值：Math.max.apply(Math,arr)

bind(thisArg,args1,args2)方法

不会调用函数，但是能改变函数的内部的this指向

thisArg：当前调用函数this的指向对象

arg1,arg2：传递的其他参数

返回由指定的this值和初始化参数改造的原函数拷贝

想要调用函数，可是声明一个变量接收bind()的返回值，之后用变量()即可调用

如果有的函数我们不需要立即调用，但是又想改变这个函数内部的this指向，此时用bind

<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        var btns=document.querySelectors('button');
        for(var i=0;i<btns.length;i++){
            btns[i].onclick=function(){
                this.disabled=true;
                setTimeout(function(){
                    // btns[i].disabled=false; 
                     //会报错  因为先执行完for循环
                     //再执行定时器的函数，此时i=4
                    this.disabled=false;
                }.bind(this),3000)  //这个this指向btns[i]
            }
        }
    </script>
</body>

4.call apply bind的比较

相同点：

都可以改变函数内部的this指向

不同点：

call和apply会调用函数，并且改变函数内部的this指向
call和apply传递的参数不一样，call传递参数arg1,arg2形式，apply必须数组形式[arg]
bind不会调用函数，可以改变函数内部的this指向

主要应用场景

call经常做继承
apply经常跟数组有关系，比如借助数学对象实现数组的最大值，最小值
bind不调用函数，但是还想改变this指向，比如改变定时器内部的this指向

在等星星呐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【javascript】进阶语法【上】

目录一、构造函数和原型二、js的成员查找机制（规则）三、组合继承：构造函数+原型对象借用构造函数继承父类型的属性借用原型对象继承父类型方法四、ES5新增的方法1.数组方法some和forEach的区别2.字符串方法3.对象方法五、函数的定义和调用1.函数的定义2.函数的调用和this指向3.改变函数内部this指向4.call apply bind的比较一、构造函数和原型静态成员构造函数本身上添加的...
复制链接

扫一扫