JS之对象、原型、原型链

一:对象的声明方式

1、字面式声明对象

如下:

var ohj={

属性名称:属性值,

方法名称:function(){

//函数执行体

}

}
 

2、new 操作符+Object 声明对象

如下:

var obj=new Object();

obj.属性名称=属性值;

obj.方法名称=function(){

//函数执行体

}

3、构造函数声明对象

如下:

function test([参数列表]){

this.属性名称=属性值;

this.方法名称=function(){

//函数执行体

}

}

var obj=new test(参数);

4、工厂方式声明对象

如下:

   function createObject(nam,age){
       var obj=new Object();
       obj.name=name;
       obj.age=age;
       obj.run=function(){
           return this.name+this.age
       };
       return obj;
}

var   obj1=createObject(‘zhangsan’,100);

var   obj2=createObject(‘lisi’,200);

5、原型模式声明对象

function test(){

test.prototype.属性名称=属性值;

test.prototype.方法名称=function(){

//函数执行体 var obj=new test();

}

}

6、混合模式声明对象

如下:


function test(参 1,参 2){

this.属性名称 1=参 1;

this.属性名称 2=参 2; }

test.prototype.方法名称=function(){

//执行代码

}
var obj=new test(参 1,参 2);

 

补充:对象的遍历

js遍历对象的属性和方法

var ren={};
ren.name="张三";
ren.age=18;

ren.demo=function () {
    document.write('ren')
};

for (var i in ren){
    alert(ren[i]);//弹出属性和方法的内容
} 

二:原型与原型链

1、凡是通过 new function() 创建的对象都是函数对象,其他的都是普通对象

2、js 中所有的函数对象都有一个 prototype 属性,这个属性引用了一个对象, 即原型对象,也简称原型

     普通对象没有 prototype,但有__proto__属性
3、js 在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做 __proto__的内置属性,

      用于指向创建它的函数对象的原型对象 prototype(即它 的构造函数的原型对象)

5、什么是原型链

    JS在创建对象的时候(无论什么对象),都有一个叫做_proto_的内置属性,

    用于指向创建它的的函数对象的原型对象prototype

// 原型:用prototype对象来添加属性和方法
var peoson=function () {};
var p=new peoson();//经历了三阶段

//1:var p={};创建对象
//2: p._proto=person.prototype
//2:创建对象(初始化对象)



// 原型链
var peoson=function () {};
peoson.prototype.say=function () {
    alert("今天天气很好")
};

var p=new peoson();
p.say();
//分析:p只是一个变量,没有say()方法,于是p从p._proto中找,又因为p._proto=person.prototype
//而person.prototype中有say方法,故p能调用say方法
 


三:继承

1、原型继承


    var a=function(){};

    a.prototype.say()=function(){

        alert(“haha”);

    }

    a.prototype.gongzi=500;


    var b=function(){};
    b.prototype=new a();
    b.prototype.gongzi=1000;
    var obj=new b();

注:子元素的成员属性 gongzi 会覆盖父元素。

2、构造继承


   function parents(name){

       this.name=name;
       this.say=function(){
          alert(this.name);
       }
    }
  function child(name,age){
       this.pobj=parents;
       this.pobj(name);
       this.age=age;
}
var c=new child(‘lisi’,20);

3、用call 和 apply实现函数隐式调用

call和apply可以用来重新定义函数的执行环境,也就是this的指向

语法:call(Obj,[arg1][arg1])

 //定义一个add 方法
    function add(x, y) {
        return x + y;
    }

    //用call 来调用 add 方法
    function myAddCall(x, y) {
        //调用 add 方法 的 call 方法
        return add.call(this, x, y);
    }

    //apply 来调用 add 方法
    function myAddApply(x, y) {
        //调用 add 方法 的 applly 方法
        return add.apply(this, [x, y]);
    }

    console.log(myAddCall(10, 20));    //输出结果30
  
    console.log(myAddApply(20, 20));  //输出结果40

可以改变Obj指向从而改变作用域:如下

    var name = '小白';

    var obj = {name:'小红'};

    function sayName() {
        return this.name;
    }

    console.log(sayName.call(this));    //输出小白

    console.log(sayName. call(obj));    //输入小红

    //我们改变了函数运行的作用域, 通过绑定不同的对象,函数内部 this 也不同。
      最终输入结果才会这样。

两者传参方式不同:call 是参数列表,apply 是数组

猜你喜欢

转载自blog.csdn.net/YU_M_K/article/details/81095225
今日推荐