零js基礎 | 程序設計 | 1 - 6 - 基础

5.5.4 函數內部屬性特殊對象：arguments和 this
arguments下的callee屬性，arguments.calle();指針，指向arguments對象的函數

    function factorial(num) {
        if (num < 1) {
            return 1
        } else {
            return num * factorial(num - 1)
        }
    }

    function factorial2(num) {
        if (num < 1) {
            return 1
        } else {
            return num * arguments.callee(num - 1)
        }
    }

this對象

    window.color = 'red'
    var o = {
        color: 'blue'
    }

    function sayColor() {
        console.log(this.color);
    }
    sayColor() //red
    o.sayColor = sayColor;
    o.sayColor() //blue

函數對象屬性outer(),保存著調用當前函數的函數引用；

    function outer(){
        var i;
        inner()
    }
    function inner(){
        var i=0,b=1,c=3;
        console.log(inner.caller)
    }
    outer()

5.5.5函數屬性和方法

函數的length表示參數的個數

    function sayName(a,b){
        //
    }
    console.log(sayName.length) //2

每個函數都有非繼承方法：apply(),call();，設置函數體內this對象的值；
apply(運行函數的作用域同this，參數組【可以是Array實例，也可以是arguments對象】)
call(運行函數的作用域同this,傳遞的參數一個個列出來)

        function sum(n1, n2) {
            return n1 + n2;
        }

        function callsum1(n1, n2) {
            return sum.apply(this, arguments)
        }

        function callsum2(n1, n2) {
            return sum.apply(this, [n1, n2])
        }
        console.log(callsum1(10, 10))
/////////////////////////////////////////////////////

        function sum(n1, n2) {
            return n1 + n2;
        }

        function callsum(n1, n2) {
            return sum.call(this, n1, n2)
        }
        console.log(callsum(10, 10))

真正的用處：

        window.color = 'red'
        var o = {
            color: 'blue'
        }

        function sayColor() {
            console.log(this.color);
        }
        sayColor(this) // red
        sayColor.call(window) //red
        sayColor.call(o) //blue

bind()方法會創建函數實例,this值會被綁定到傳給bind()函數的值；

        window.color = 'red'
        var o = {
            color: 'blue'
        }

        function sayColor() {
            console.log(this.color)
        }
        var objsaycolor = sayColor.bind(o) //即創建了objsaycolor()函數，其中他的this = o 對象
        objsaycolor(); //blue

5.6基本包裝類型 Boolean/Number/String

        var s1 = 'some txt'
        var s2 = s1.substring(2);

為什麼基本類型調用對象方法

        //創建String實例
        var s1 = new String('some txt')  
        //為實例調用方法
        var s2 = s1.substring(2)
        //銷毀實例
        s1 = null;

方法

var num  = 10;
        console.log(num.toString(2)) //1010;
        console.log(num.toFixed(2)) //10.00
        console.log(num.toExponential(1)) //1.0e+1
        console.log(n.toPrecision(1));
    var n = 99;
    console.log(n.toPrecision(2));  // 1e+2
    console.log(n.toPrecision(3)); //99.0
    console.log(n.toPrecision(4)); //99.00
    表示以多少位显示，范围为 1- 21

不修改字符串本身，返回基本字符串值，
concat()/slice()/substr()/substring()
slice()负与长度相加
substr()、substring()负置为0

var vS = 'fuckword'
console.log(vS.length); //8
console.log(vS.charAt(1)) //u
console.log(vS.charCodeAt(1)) //117
console.log(vS[1]) //u
var rvS = vS.concat('aaaa','bbb')
console.log(rvS) //fuckwordaaaabbb

位置方法：indexOf()/lastIndexOf();

    var strindex = 'jaspfjqijdfjsfnfcjspfqmjfpwpfjmadsljkfmpqiergbrufjnapskdjfmpa';
    var position  = []
    var pos = strindex.indexOf('f');
    while (pos > -1){
        position.push(pos)
        pos = strindex.indexOf('f',pos+1)
    };
    console.log(position);

trim()去空格；
strindex.toLocaleLowerCase()
strindex.toLocaleUpperCase()

match()/search()

    var txt = 'cat bat eat fat'
    var pattern = /.at/

    //与 pattern.exec(txt);
    var matches = txt.match(pattern)  
    console.log(matches.index) //0
    console.log(matches[0])  //at 返回匹配
    console.log(pattern.lastIndex) //0

    var txt = 'cat bat eat fat'
    var pattern = /at/

    var matchs = txt.search(pattern)
    console.log(matchs) //1 at在字符串第一次出现位置1

$n表达匹配第n个子字符串 n : 1-9 nn: 10 -99

var txt = 'cat bat eat fat'
var pattern = /at/
var retxt = txt.replace(/(.at)/g,'word$1')
console.log(retxt)
//wordcat wordbat wordeat wordfat

只有一个匹配：replace(//,function(模式匹配，模式匹配项在字符串中的位置，原始字符串 ){ })
多个匹配：replace(//,function(模式匹配，第一捕获组匹配项，第二捕获组匹配项....,模式匹配项在字符串中的位置，原始字符串 ){ })

function reppacehtml(str) {
    return str.replace(/[<>]/g, function(match, pos, priginalText) {
        switch (match) {
            case "<":
                return '';
            case ">":
                return ''
        }
    })
}
console.log(reppacehtml('<p>heooooooo</p>'))

split(字符串或正则，数组大小)

var colorText = "red,blue,green,yellow";
var colors1 = colorText.split(","); //["red", "blue", "green", "yellow"]
var colors2 = colorText.split(",", 2); //["red", "blue"]
var colors3 = colorText.split(/[^\,]+/); //["", ",", ",", ",", ""]

localeCompare()方法；

function determineOrder(value) {
    var result = stringValue.localeCompare(value);
    if (result < 0) {
        alert("The string 'yellow' comes before the string '" + value + "'.");
    } else if (result > 0) {
        alert("The string 'yellow' comes after the string '" + value + "'.");
    } else {

        alert("The string 'yellow' is equal to the string '" + value + "'.");
    }
}
determineOrder("brick");
determineOrder("yellow");
determineOrder("zoo");

fromCharCode()方法；String构造函数本身的静态方法，接收一个或多个字符编码，转成字符串；
String.fromCharCode(104,101)

5.7.1 Global对象
encodeURI()整个URI，只有空格会换成20%，其它都原封不动；
encodeURIComponent()主要用于对URI中的某一段；发现任何非标准都转换；

encodeURI('http://baidu.com/google com/')
//"http://baidu.com/google%20com/"
encodeURIComponent('http://baidu.com/google com/')
//"http%3A%2F%2Fbaidu.com%2Fgoogle%20com%2F"

decodeURI()
decodeURIComponent()

eval()方法，解析器；传入的参数当语句来解析；

eval('alert("hi")') = alert("hi")

eval("function sayHi() { alert('hi'); }"); //注意这里有双引号，是一个字符串
sayHi(); //hi

取得global对象方法：

    var global = function(){
        return this;
    }()
    console.log(global)

Math.ceil()/Math.floor()/Math.round()/Math.random()


//介乎于lv与uv之间的数（包括lv/uv）
    function selectFrom(minV,maxV){
        var cV = maxV - minV + 1;
        return Math.floor(Math.random() * cV + minV);
    }
    var num = selectFrom(2,10);
    console.log(num)

EAMAScript 5 定义了描述这些属性特征的各类特性，包括数据属性和访问器属性。

[[Configurable]]：表示是否能通过delete删除
[[Enumerable]]：表示能否用for-in循环返回。
[[writable]]：表示能否修改属性的值。
[[Value]]：包含这个属性的数据值。默认值为undefined。

var person = {};
Object.defineProperty(person, "name", {
writable: false,
value: "Nicholas"
});
alert(person.name); //"Nicholas"
person.name = "Greg";
alert(person.name); //"Nicholas"

已经设置为不能configurable为false,即不能删除，再次设置将抛出错误

var person = {};
Object.defineProperty(person, "name", {
configurable: false,
value: "Nicholas"
});
//抛出错误
Object.defineProperty(person, "name", {
configurable: true,
value: "Nicholas"
});

访问器属性；

访问person.name，实际调用getter()函数，写放时调用setter()函数;
Object.defineProperty( )方法，该方法包含三个参数：属性所在的对象，属性的名字，描述符对象;

    var person = {
        _name: 'elmok', //默认
        _age: 31, //默认
        _tel: 123456 //默认
    }
    Object.defineProperty(person, 'name', {
        get: function() {
            return this._name;
        }
    })
    Object.defineProperty(person, 'age', {
        set: function(newage) {
            this._age = newage;
        }
    })

    console.log(person.name) //elmok
    person.name = 'EE' //尝试修改 
    console.log(person.name) //elmok 不可修改
    console.log(person.age) //不可读属性undefined
    person.age = '26'
    console.log(person._age) //26，可修改，直接读取_age才可看到已改
    console.log(person.tel) //修改
    person.tel = 888888;
    console.log(person.tel) //888888
    
    等价另一种写法
    
    Object.defineProperty(person,{
        name:{
            get:function(){
                return this._name;
            }
        }
    })

//
工厂模式

    function cperson(name,age,job){
        var o = new Object();
        o.name = name;
        o.age = age;
        o.syaName = function(){
            console.log(this.name);
        }
        return o;
    }

构造函数模式

    function Person(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function(){
            console.log(this.name)
        }
        //this.sayName = new Function('console.log(this.name)')
    }

    console.log(per1.constructor == Person) //true
    console.log(per1 instanceof Object) //true
    console.log(per1 instanceof Person) //true

调用

    //构造调用 
    var per1 = new Person('nicholas',29,'software Engineer')

    //普通函数
    Person('Geay',27,'Doctor')
    window.sayName();

    //另一个对象作用域中调用
    var o = new Object()
    Person.call(o,'Geay',25,'Doctor')
    o.sayName()

问题：

console.log( per1.sayName == per2.sayName ) //false 创建多次了

如果定义在外面

    function Person(name,age){
        this.name = name;
        this.age = age;
        this.sayName = sayName;
    }
    
    function sayName(){
        console.log(this.name)
    }
    
    var per1 = new Person('nicholas',29,'software Engineer')
    var per2 = new Person('grey',28,'Doctor')
    
    console.log( per1.sayName == per2.sayName )  //true;

所以是原型 prototype(原型)属性，指针，指向一个对象
对象的用途：包含可以由特定类型的所有实例共享的属性和方法；
通过创建的那种对象的 ‘ 原型对象 ’

创建新函数--》创建prototype属性 --》 prototype属性指向函数的原型对象

原型对象自动获得constuctor，指向--》prototype所有的函数

Person.prototype 《-- Person.prototype.constructor

Per1.[[prototype]] --> Person.prototype 实例属性仅仅指向Person.prototype
Per2.[[prototype]] --> Person.prototype

确定与实例的[[prototype]]是否有这种关系；isPrototypeOf()

alert(Person.prototype.isPrototypeOf(per1)); //true

ECMAScript 5 Object.getPrototypeOf[per1] == Person.prototype //左边返回对象的原型
alert(Object.getPrototypeOf(person1).name); //"Nicholas"

解析器会问：per1有sayName吗？答：无，则再搜索prototype，答：有；

如果外属性有值，则会覆盖prototype的值；

    function Person() {}
    Person.prototype.name = 'nic'
    Person.prototype.age = 29;
    Person.prototype.sayName = function() {
        console.log(this.name);
    }
    var per1 = new Person()
    var per2 = new Person();

    per1.name = 'grey'
//  delete per1.name  可以删除实例属性，用回原型
    console.log(per1.name)

    alert(person1.hasOwnProperty("name")); //false

hasOwnProperty()方法，可检测一个属性是存在实例中，还是原型中，来自原型返回false,来自自身属性返回true; 如以上；所以可以确定什么时候访问的是实例属性，什么时候访问的是原型属性

所以　in的方法返回true,而 hasOwnProperty返回 false，则表明在原型

    function hasPrototypeProperty(obj,name){
        return !obj.hasOwnProperty(name) && (name in object)
    }

Object.keys()返回所有可枚举实例属性；--数组；

    function Person() {}
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function() {
        alert(this.name);
    };
    var keys = Object.keys(Person.prototype);
    alert(keys); //"name,age,job,sayName"
    var p1 = new Person();
    p1.name = "Rob";
    p1.age = 31;
    var p1keys = Object.keys(p1);
    alert(p1keys); //"name,age"

    function Person(){}
    Person.prototype = {  //自动创建的 constructor被重写
        name:'nic',
        age:29,
        job:'softw',
        sayName:function(){
            console.log(this.name)
        }
    }
    var per1 = new Person()
    console.log(per1.constructor == Person) //false  constructor属性prototype下的属性，所以访问是实例.的形式，就像访问 .name一样

func.....
Person.prototype = {
    constructor:Person, //重设
}
重设之后会导致constructor的[[Enumerable]]设置为true; 所以

Object.defineProperty(Person.prototype,'constructor',{
    enumerable:false,
    value:Person
})

可以先创建实例，再创建原型，但如果重点整个原型，以{}的形式写，则情况不一样，会切断构造函数与最初原型的联系，记住：实例的指针仅指向原型，而不是指向构造函数；

情况一：

function Person(){}  //1、定义构造
var f = new Person() //2、定义实例
    Person.prototype.sayHi = function(){ //3、定义原型
        console.log('hi')
    }
f.sayHi()  //原型在实例之后定义也可访问到；即任何位置；

情况二：

function Person(){}  //1、定义构造
var f = new Person() //2、定义实例
Person.prototype = { //3、重写原型
    constructor:Person,
    name:'nic',
    age:29,
    job:'soft',
    sayName:function(){
        console.log(this.name)
    }
}
f.sayName()    //error,f因为引用的是最初的原型

//而Person()引用的是重写的原型

常用的方法都是定义在其构造函数的原型上

console.log(typeof Array.prototype.sort) //function

原型的问题：

function Person(){}    
Person.prototype = {
  constructor:Person,
  friends:['shelby','court'],
  sayName:function(){
      console.log(this.name)
  }
}
    var per1 = new Person()
    var per2 = new Person()
    per1.friends.push('van')
    console.log(per2.friends) //["shelby", "court", "van"] 只修改1，2也被影响了；

使用组合，可变写在构造里，不可改即共享部分写在原型里

function Person(name,age){
    this.name = name;
    this.age = age;
    this.list = ['111','2222']
}
Person.prototype = {
    constructor:Person,
    sayName : function (){
        console.log(this.name)
    }
}    
var per1= new Person('elmo1',29)
var per2= new Person('elmo2',30)

per1.name = 'elmo8'
per1.list.push('333')

console.log(per1.name) //elmo8
console.log(per2.name) //elmo2
console.log(per1.list) //["111", "2222", "333"]
console.log(per2.list) //["111", "2222"]

动态原型 (只有sayName()不存在时，才加到原型)

    function Person(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        if(typeof this.syaName != 'function'){
            Person.prototype.sayName = function(){
                console.log(this.name)
            }
        }
    }
    var f = new Person('nic',29,'sf')
    f.sayName()

寄生式，即未原型时

function Person(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.syaName = function (){
        console.log(this.name)
    }
    return o;
}
    var f = new Person('nic',29,'sf')
    f.sayName(); //nic

寄生式
返回的对象或构造函数之间没有任何关系，因此不能依赖 instanceof来确定

    function SpecitalArray(){
        var values = new Array();
        values.push.apply(values,arguments);
        values.toPipedString = function(){
            return this.join('|')
        }
        return values;
    }
    var colors = new SpecitalArray('red','blue','green')
    console.log(colors.toPipedString());
    console.log(colors instanceof SpecitalArray)

稳妥构造函数模式

无公共属性，不引用this new

    function Person(name,age,job){
        va o = new Object()
        o.sayName = function(){
            console.log(name)
        }
        return o
    }
    var f = Person('nic',29,'sf')
    f.sayName()

    function SuperType(){
        this.property = true;
    }
    SuperType.prototype.getSuperValue = function (){
        return this.property;
    }
    function SubType(){
        this.subproperty = false;
    }
    SubType.prototype = new SuperType()
    SubType.prototype.getSubvalue = function(){
        return this.subproperty;
    }
    var instance = new SubType(); //重写，所以instance.constructor-->SuperType
    instance.getSuperValue();
    
    //搜索实例--》搜索SubType.prototype--》搜索SuperType.prototype-->最后一步才找到方法；
    
    console.log(instance instanceof Object)
    console.log(instance instanceof SuperType)
    console.log(instance instanceof SubType)

继承

function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
//添加新方法
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
//重写超类型中的方法
SubType.prototype.getSuperValue = function (){
return false;
};
var instance = new SubType();
alert(instance.getSuperValue()); //false

原型链的问题；

    function SuperType() {
        this.color = ['red', 'blue', 'green']
    }

    function SubType() {

    }
    SubType.prototype = new SuperType()
    var in1 = new SubType()
    in1.color.push('black')
    console.log(in1.color) //["red", "blue", "green", "black"]

    var in2 = new SubType()
    console.log(in2.color) //["red", "blue", "green", "black"] 被影响到

借用构造函数

function SuperType(name){
    this.name = name
}
function SubType(){
    SuperType.call(this,'nic') //可以传递参数
    this.age = 29;
}    
    var in1 = new SubType()
    console.log(in1.name) //nic
    console.log(in1.age);//29

组合继承--伪经典继承；

    function SuperType(name) {
        this.name = name;
        this.colors = ['red', 'blue', 'green']
    }
    SuperType.prototype.sayName = function() {
        console.log(this.name)
    }

    function SubType(name, age) {
        SuperType.call(this, name)
        this.age = age;
    }

    SubType.prototype = new SuperType()
    SubType.prototype.constructor = SubType;
    SubType.prototype.sayAge = function() {
        console.log(this.age)
    }
    var in1 = new SubType('nic', 29)
    in1.colors.push('black')
    console.log(in1.colors) //["red", "blue", "green", "black"]
    in1.sayName() //nic
    in1.sayAge() //29

    var in2 = new SubType('grey', 27)
    console.log(in2.colors); //["red", "blue", "green"]
    in2.sayName() //grey
    in2.sayAge() //27

原型式继承

    function object(o) {
        function F() {}
        F.prototype = o;
        return new F(); //内部复制一次再返回，相当于浅复制 ；
    }
    var person = {
        name: 'nic',
        friends: ['shll', 'count', 'van']
    }
    var per1 = object(person)
    per1.name = 'grey'
    per1.friends.push('rob')
    var per2 = object(person)
    per2.name = 'linda'
    per2.friends.push('barbie')
    console.log(person.friends) //["shll", "count", "van", "rob", "barbie"]

Object.create(新对象原型的对象，新对像定义额外属性的对象)

    var person = {
        name: 'nic',
        friends: ['shll', 'count', 'van']
    }
    
    var per1 = Object.create(person,{
        name:{
            value:'grey'
        }
    })
    console.log(per1.name)

寄生式继承

    function createAnother(original){
        var clone = Object(original); //创建一个新对象
        clone.sayHi = function(){ //某种方式增强这个对象
            console.log('hi')
        }
        return clone; //最后再返回增强后的对象
    }

最有效有方式：寄生组合式继承

组合继承的问题

    function SuperType(name){
        this.name = name;
        this.colors = ['red','blue','green']
    }
    SuperType.prototype.sayName = function(){
        console.log(this.name)
    }

    function SubType(name,age){

        SuperType.call(this,name); 
        //第二次调用 SuperType，这一次又在新对象上创建实例属性 name,colors,于是这两个属性就屏蔽了第一次调用时原型中的同名属性；

        this.age = age;
    }

    SubType.prototype  = new SuperType(); 
    //第一次调用 SuperType Sub.prototype会得到两个属性 name colors; 

    SubType.prototype.constructor = SubType;
    SubType.prototype.sayAge = function(){
        console.log(this.age)
    }

所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法

inheritPrototype(子类型构造函数，超类型构造函数),用于原型复制；

    function inheritPrototype(subType,superType){
        var prototype = object(superType.prototype) //创建对象
        prototype.constructor = subType;        //增强对象
        subType.prototype = prototype;          //指定对象
    }

1、创建superType.prototype函数副本
2、为创建的副本添加constructor属性
3、将副本赋值给subType的原型

    function inheritPrototype(subType,superType){
        var prototype = Object(subType.prototype) //创建对象
        prototype.constructor = subType;        //增强对象
        subType.prototype = prototype;          //指定对象
    }
    
    function SuperType(name){
        this.name = name;
        this.colors = ['red','blue','green']
    }
    SuperType.prototype.sayName  = function(){
        console.log(this.sayName)
    }
    function SubType(name,age){
        SuperType.call(this,name)
        this.age = age;
    }
    inheritPrototype(SubType,SuperType);  //改写
    SubType.prototype.sayAge = function(){
        console.log(this.age)
    };
    
    var per1 = new SubType('nnn',30)
    console.log(per1.colors) //['red','blue','green']
    console.log(per1.sayAge()) //30

这个例子的高效率体现在它只调用了一次SuperType 构造函数，并且因此避免了在SubType.
prototype 上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用
instanceof 和isPrototypeOf()

ECMAScript 支持面向对象（OO）编程，但不使用类或者接口。对象可以在代码执行过程中创建和
增强，因此具有动态性而非严格定义的实体。在没有类的情况下，可以采用下列模式创建对象。
 工厂模式，使用简单的函数创建对象，为对象添加属性和方法，然后返回对象。这个模式后来
被构造函数模式所取代。
 构造函数模式，可以创建自定义引用类型，可以像创建内置对象实例一样使用new 操作符。不
过，构造函数模式也有缺点，即它的每个成员都无法得到复用，包括函数。由于函数可以不局
限于任何对象（即与对象具有松散耦合的特点），因此没有理由不在多个对象间共享函数。
 原型模式，使用构造函数的prototype 属性来指定那些应该共享的属性和方法。组合使用构造
函数模式和原型模式时，使用构造函数定义实例属性，而使用原型定义共享的属性和方法。
JavaScript 主要通过原型链实现继承。原型链的构建是通过将一个类型的实例赋值给另一个构造函
数的原型实现的。这样，子类型就能够访问超类型的所有属性和方法，这一点与基于类的继承很相似。
原型链的问题是对象实例共享所有继承的属性和方法，因此不适宜单独使用。解决这个问题的技术是借
用构造函数，即在子类型构造函数的内部调用超类型构造函数。这样就可以做到每个实例都具有自己的
属性，同时还能保证只使用构造函数模式来定义类型。使用最多的继承模式是组合继承，这种模式使用
原型链继承共享的属性和方法，而通过借用构造函数继承实例属性。
此外，还存在下列可供选择的继承模式。
 原型式继承，可以在不必预先定义构造函数的情况下实现继承，其本质是执行对给定对象的浅
复制。而复制得到的副本还可以得到进一步改造。
 寄生式继承，与原型式继承非常相似，也是基于某个对象或某些信息创建一个对象，然后增强
对象，最后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致的低效率问
题，可以将这个模式与组合继承一起使用。
 寄生组合式继承，集寄生式继承和组合继承的优点与一身，是实现基于类型继承的最有效方式。

零js基礎 | 程序設計 | 1 - 6 - 基础

最新文章

最近回复

分类

归档

其它