[Javascript] js的类和对象

类

graph LR
类-->构造函数
类-->prototype对象
类-->instanceof运算符
类-->constructor属性
类-->isPrototypeOf方法
类-->hasOwnProperty方法
类-->__proto__属性
类-->toString方法
类-->对象

对象

一切引用类型都是对象
console.log(typeof x);    // undefined
console.log(typeof 10);   // number
console.log(typeof 'abc'); // string
console.log(typeof true);  // boolean

console.log(typeof function () {});  //function

console.log(typeof [1, 'a', true]);  //object
console.log(typeof { a: 10, b: 20 });  //object
console.log(typeof null);  //object
console.log(typeof new Number(10));  //object
  • undefined、number、string、boolean 是值类型
  • 函数、对象、数组、null

判断值类型的用typeof，判断引用类型的用instanceof

对象就是一些属性集合
var obj = {
    a:10,
    b:function (){},
    c:function (){}
}

对象里面一切都是属性，方法也是属性，以键值对的形式表现出来

函数定义属性
var func = function () {

}
func.a = 10;
func.b = function () {
    console.log('hello world');
}
func.c = {
    name:'123',
    year:1988
}
对象都是通过函数创建的
function Func(){
    this.name = 'lili';
    this.year = 1988;
}
var fn1 = new Func();
var obj = {a:20,b:30};
var arr = [1,2,3];

<!--等同于-->
var obj = new Object();
obj.a = 20;
obj.b = 30;
var arr = new Array();
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;

对象是函数创建的，函数是一种对象

函数和对象的关系

函数就是对象的一种
var func = function (){};
console.log(func instanceof Object); // true
对象都是通过函数进行创建的
//var obj = { a: 10, b: 20 };
//var arr = [5, 'x', true];

<!--以上代码的本质-->
var obj = new Object();
obj.a = 10;
obj.b = 20;

var arr = new Array();
arr[0] = 5;
arr[1] = 'x';
arr[2] = true;

new干了什么事：

  1. this=new Object()
  2. 该对象继承constructor的prototype
  3. return this

构造函数与原型prototype

构造函数对于每一个实例对象，属性和方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率让属性和方法在内存中只生成一次，然后所有实例都指向那个内存地址，这时候就要使用
prototype——原型 模子,里面放了公用的方法

（Javascript规定，每一个构造函数都有一个prototype属性，指向原型对象。这个对象的所有属性和方法，都会被构造函数的实例继承）

prototype原型

  • 函数是一种对象，每一个函数都自动拥有有prototype属性
  • prototype属性是一个对象(==属性的集合==)，默认有一个不可枚举的constructor属性，指向函数本身
graph TB
func-->|每一个函数都有prototype属性| func.prototype
func.prototype-->|默认有constructor| func.prototype.constructor
func.prototype.constructor-->|构造函数指向函数本身| func
isPrototypeOf判断一个对象象是否为一个实例的原型
  console.log(a.prototype.isPrototypeOf(b));
  console.log(b.prototype.isPrototypeOf(b));
hasOwnProperty判断对象是否有某个特定的自有属性
console.log(a.hasOwnProperty('name'));//true
console.log(b.hasOwnProperty('name'));//true
console.log(a.hasOwnProperty('alertA'));//false
console.log(b.hasOwnProperty('alertB'));//false
propertyIsEnumerable方法返回一个布尔值，表明指定的属性名是否是当前对象可枚举的自身属性
for(var key in obj) {
    f(obj.propertyIsEnumerable(key) {
        <!--do somethings-->
    };
};
  • 判断给定的属性是否可以用 for...in 语句进行枚举同时也是对象的自有属性。
  • for ... in 枚举是包含原型链上的属性的，propertyIsEnumerable作用于原型方法上时，始终是返回false的
  • for...in可以枚举对象本身的属性和原型上的属性，而propertyIsEnumerable只能判断本身的属性是否可以枚举
  • 预定义的属性不是可列举的，而用户定义的属性总是可列举的。所以如果你只想遍历对象本身的属性

原型链

  • 访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着__proto__这条链向上找，这就是原型链。
  • 当我们用obj.xxx访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，如果没有找到，就到其原型对象上找，如果还没有找到，就一直上溯到Object.prototype对象，最后，如果还没有找到，就只能返回undefined。

隐式原型__proto__

每个对象都已一个__proto__,指向创建这个对象的函数的prototype
function Phone() {

}

var mi = new Phone();

console.log(mi instanceof Object); //true
console.log(mi instanceof Array); //false
console.log(mi instanceof Function); //false
console.log(mi instanceof Phone); //true

// 实例对象的隐式原型链
console.log('实例对象指向Phone.prototype:',mi.__proto__);
console.log('Phone.prototype指向Object.prototype:',mi.__proto__.__proto__);
console.log('Objec.prototype指向null:',mi.__proto__.__proto__.__proto__);

// 构造函数的隐式原型链
console.log('Phone.__proto__指向Function.prototype',Phone.__proto__);
console.log('Function.prototype指向Object.prototype',Phone.__proto__.__proto__);
console.log('Object.prototype指向null',Phone.__proto__.__proto__.__proto__);
var obj = new Object();
// 一般创建对象的原型链
console.log('创建对象的__proto__',obj.__proto__);
console.log('Object.prototype指向null',obj.__proto__.__proto__);

function Object(){

}
console.log('指向Function.prototype',Object.__proto__);
console.log('Object.prototype',Object.__proto__.__proto__);
function Function(){

}
console.log(Function.__proto__);
 console.log('Object.prototype',Function.__proto__.__proto__);

上面例子可以知道

  • Object.prototype对象的__proto__指向的是null，特例
  • xxx.prototype是一个对象
  • Function和Object是由Function创建的,__proto__指向Fcuntion.prototype
graph BT
Object.prototype-->|__proto__| null
Function.prototype-->|__proto__| Object.prototype
Phone.prototype-->|__proto__| Object.prototype
mi-->|__proto__| Phone.prototype
Phone-->|__proto__| Function.prototype
obj-->|__proto__| Object.prototype
Function-->|__proto__| Function.prototype
Object-->|__proto__| Function.prototype
arr-->|__proto__| Array.prototype
Array.prototype-->|__proto__| Object.prototype
  • Function.prototype/Phone.prototype/obj/Array.prototype原型对象都是由function Object创建的，所以指向Object的原型对象
  • Phone,Function和Object是由function Function创建的，所以指向Function的原型对象
  • Object是由Fucntion创建,而Function的原型对象是由Object创建

constructor属性

  • constructor属性的值是一个函数对象
  • 任意函数的fuc.prototype.constructor === fuc
  • 原型的constructor指向构造函数，实例constructor同样指向构造函数
    方法1
function Ba(str) {
    this.name = str ? str : 'baobo';
    this.sayHello = function() {
        alert('hello');
    }
}

Ba.prototype = {
    alertA:function (){
        alert(this.name+'-A');
    },
    alertB: function() {
        alert(this.name+'');
    },
}

var instance_b = new Ba('haha');

// constructor
console.log('原型的构造函数', Ba.prototype.constructor); //function Object(){}
console.log('实例的构造函数', instance_b.constructor); //function Object(){}

// 新定义的原型对象,并不具有constructor属性
console.log(Ba.prototype.hasOwnProperty('constructor')); //false

上面的方法相当于重写Ba.prototype对象,新定义的原型对象不包含constructor,因此构造函数指向的function Object(){},需要显式的给原型添加构造函数

虽然实例对象的constructor和构造函数原型的constructor都指向构造函数，但是实例对象并不具有constructor这个属性，是继承至Ba.prototype

console.log(ba.hasOwnProperty('constructor')); //false
console.log(Ba.prototype.hasOwnProperty('constructor')); //true
graph LR
instance_b.constructor-->|实例的构造函数| Ba
Ba.prototype.constructor-->|原型对象的构造函数| Ba
修改
Ba.prototype = {
    constructor: Ba,
    alertA: function() {
        alert(this.name + '-A');
    },
    alertB: function() {
        alert(this.name + '');
    },
}
<!--这样就可正确指向构造函数Ba了-->
方法2,直接在预定义的原型对象上扩展
function Ba(str) {
    this.name = str ? str : 'baobo';
    this.sayHello = function() {
        alert('hello');
    }
}

Ba.prototype.alertA = function() {
    alert(this.name + '-A');
}

Ba.prototype.alertB = function() {
    alert(this.name + 'B');
}

var instance_b = new Ba('haha');

// constructor
console.log('原型的构造函数', Ba.prototype.constructor); //f Ba(){}
console.log('实例的构造函数', instance_b.constructor); //f Ba(){}
graph TB
声明构造函数Ba-->构造函数有prototype对象
构造函数有prototype对象-->prototype对象自动有constructor属性
prototype对象自动有constructor属性-->创建实例对象instance_b
创建实例对象instance_b-->继承prototype,有instance_b.constructor
继承prototype,有instance_b.constructor-->instance_b.constructor指向Ba
instance_b.constructor指向Ba-->对象有__proto__
对象有__proto__-->instance_b指向Ba.prototype

instanceof

  • 检测对象是否属性某个类 A instanceof B（验证原型对象与实例对象之间的关系 判断具体类型）
  • Instanceof的判断队则是：沿着A的__proto__这条线来找，同时沿着B的prototype这条线来找，如果两条线能找到同一个引用，即同一个对象，那么就返回true。如果找到终点还未重合，则返回false。
  • instanceof表示的就是一种继承关系，或者原型链的结构
  • instanceof不光能找直接的父级，能找父级的父级的...constructor 只能找直接的父级
function a() {
    this.name = 'alisy';
}

a.prototype.alertA = function () {
    alert(this.name);
}
function b() {
    this.name = 'baobo';
}

b.prototype.alertB = function () {
    alert(this.name);
}
function c() {
    this.name = 'cmen'
}
c.prototype = a.prototype;

//b得prototype对象指向一个c的实例，那么所有的b的实例就能继承c

b.prototype = new c();

b.prototype.constructor = b;

var newb = new b();

var newc = new c();

newb.alertA(); //执行baobo

newc.alertA(); //执行cmen
//instanceof

console.log(b instanceof a);

console.log(b instanceof b);

继承：父级有的，子级也有——给父级加东西，子级也有

  • 第一种方法也是最简单的方法，使用call或apply方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行
 Animal.apply(this, arguments);
                   Animal.call(this, arguments);
  • 第二种方法更常见，使用prototype属性。如果"猫"的prototype对象，指向一个Animal的实例，那么所有"猫"的实例，就能继承Animal了。
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

EcmaScript6的扩展

JavaScript也有了类（class）的概念

ES6为对象做了哪些扩展

面向对象的讲解

call方法
  • 调用call的对象必须是个函数
  • 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
  • 定义：一个对象的一个方法调用call，以call方法的第一个参数替换当前对象。
  • 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
    如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj
apply方法
  • 语法：apply([thisObj[,argArray]])
  • 定义：应用某一对象的一个方法，用另一个对象替换当前对象。
  • 说明：如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
    如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

实现继承除了用call和apply还可以使用原型链实现

案例一
function add(a+b){
    alert(a+b);
}
function sub(a,b){
    alert(a-b);
}
add.call(sub,3,1);

//个人理解call和apply的作用就是切换函数的对象上下文

解：用括号的第一个参数来代替this的指向，将add的执行的上下文由window切换为sub，相当于this指向由window换成sub，add.call(sub,3,1) == add(3,1),结果为alert(4);
注意 : js中的函数是对象，函数名是对Function对象的引用
案例二
function Animal(){
    this.name = "animal";
    this.showName = function(){
        alert(this.name);
    }
}
function Cat(){
    this.name = "cat";
}
var animal = new Animal();
var cat = new Cat();

//通过call()和apply(),将原本属于Animal对象的方法showName交给Cat对象使用了,也就是将this指向Animal动态更改为Cat
//输出的结果是cat
animal.showName.call(cat,"","");
//animal.showName.apply(cat,[]);
案例三：实现继承
function Animal(name) {
    this.name = name;
    this.showName = function(name, a, b) {
        console.log('this是：' + this.name + '\na是：' + a + '\nb是：' + b);
    }
}

function Cat(name) {
    Animal.call(this, name);
    this.showLog = function() {
        console.log('hello');
    }
}

Cat.prototype.showAge = function() {
    console.log('world');
}

var cat = new Cat('hello world');

cat.showName('abc', 12, 5); //可以直接调用showName()方法

注意：Animal.call(this);是使用Animal对象代替this对象，
this指向Animal，Cat就有了Animal对象中的方法和属性，Cat对
象就可以直接调用Animal对象的方法和属性
call第二个参数开始会映射到Animal相应的参数位置
案例四：多重继承
function Animal() {
    this.showSub = function(a, b) {
        console.log(a - b);
    }
}

function Cat() {
    this.showAdd = function(a, b) {
        console.log(a + b);
    }
}

function Dog() {
    Animal.call(this);
    Cat.call(this);
}

var a = new Dog();
a.showSub(5,3);//2
a.showAdd(5,3);//8

使用两个或者更多的call实现多重继承
call和apply这两个方法差不多，区别在于call的第二个参数是任意类型，而apply的第二个参数必须是数组，也可以是arguments

实现func.call(this,arg1,arg2...)

Function.prototype.call2 = function(context) {
    console.log(arguments);
    // 如果传入的为null，则指向window
    context = context || window;
    // 函数调用的时候，this指向调用的函数
    context.fn = this;
    var args = [];
    for (var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }
    // 解析字符串，执行其中的js代码
    // 获取返回值
    var result = eval('context.fn(' + args + ')');
    // 执行完后将添加的属性删除
    delete context.fn;
    return result;
};

var heo = 'hello world';

var foo = {
    name: 'lili'
}

function func(age, sex) {
    console.log(age);
    console.log(sex);
    console.log(this.name);
    return {
        name: this.name,
        age: age,
        sex: sex,
    }
}
func.call2(null);
console.log(func.call2(foo, 23, '男'))

实现func.apply(this,[])

  1. 修改func函数的this指向
  2. 执行func函数
Function.prototype.newApply = function(context, arr) {
    var result, i, len;
    context = context || window;
    context.fn = this;

    if (!arr) {
        result = context.fn;
    } else {
        var args = [];
        for (i = 0, len = arr.length; i < len; i++) {
            args.push('arr[' + i + ']');
        }
        result = eval('context.fn(' + args + ')');
    }

    delete context.fn;
    return result;
}

var obj = {
    name: 'alice'
}

function func(age, sex) {
    console.log(age);
    console.log(sex);
    console.log(this.name);
    return {
        name: this.name
    }
}

console.log(func.newApply(obj, [23, '女']));

this指向

写程序的一个错误，this丢失原先的对象，将对象的方法进行赋值之后再执行，于是变成window.new_showA(),this指向全局对象window，

    var a = 1;
    var obj = {
        a: 11,
        showA: function () {
            console.log(this.a);
        }
    };
    obj.showA();
    var new_showA = obj.showA;

    new_showA(); //1

所以此时需要修改this指向

Function.prototype.bind

var new_showA = obj.showA.bind(this);

new_showA(); //1

实现一个bind => newBind

    Function.prototype.newBind = function (context) {
        //this是该函数的调用者
        var self = this;
        //arguments.slice(1),从1开始截取数组
        var args = Array.prototype.slice.call(arguments, 1);
        return function () {
            // 第二个arguments是返回的函数的参数
            var bindargs = Array.prototype.slice.call(arguments);
            return self.apply(context, args.concat(bindargs));
        }
    };

    var a = 9;

    var obj = {
        a: 99,
        showA: function (name, age) {
            console.log(this.a);
            console.log(name);
            console.log(age);
        }
    };
    obj.showA('alice', 12);
    var new_showA = obj.showA.newBind(obj, 'lilith');

    new_showA(23); //相当于执行obj.showA.apply(obj);

new运算符的简易实现

    function Animal(name, age) {
        this.name = name;
        this.age = age;
        this.voice = 'miao';
    }

    Animal.prototype.type = 'mao';

    Animal.prototype.saying = function () {
        console.log(this.voice);
    };

    var cat = _new(Animal, 'mimi', 10);

    console.log('instance =>', cat);
    console.log({
        name: cat.name,
        age: cat.age,
        type: cat.type
    });

    cat.saying();

    function _new() {
        // 将伪数组arguments从头部删除一个，并将其其返回,此处是为了获取传入的构造函数
        var Constructor = Array.prototype.shift.call(arguments);
        // obj.__proto__指向创建obj的函数的原型,也就是function Object(){}的原型,obj是一个实例对象，没有prototype属性
        var obj = Object.create(Constructor.prototype);
        var result = Constructor.apply(obj, arguments);
        // 如果构造函数有返回值，做一下处理，如果返回的是对象，就返回对象，否则该是什么就是什么
        return typeof result === 'object' ? result : obj;
    }

new干了什么

  1. 获取构造函数
  2. 通过Object.create生成新对象
<!--Object.create类似于-->
function Func(){};
Func.prototype = Constructor.prototype;
return new Func();
  1. 将this修改为新对象obj，执行构造函数
  2. 将新对象返回

Docs

JavaScript中创建对象的7种模式详解
冴羽的博客

原文地址：https://www.cnblogs.com/mybilibili/p/10686876.html

时间： 2024-10-10 00:37:37

[Javascript] js的类和对象的相关文章

JS定义类及对象

JS定义类及对象 1.工厂方式 <script type="text/javascript"> function createObject(name){ var p = new Object(); p.name=name; p.say = function(){alert(p.name+'ff');} return p; } var p1 = createObject("p1"); var p2 = createObject("p2"

js自定义类与对象

js中创建自定义类与创建对象:js创建类与AS3,java都有很大的不同,,,下面来看看他的庐山真面目..由于js也是一个面向对象的编程语言所以也存在像其他语言那样的创建自定义的类,和通过类来创建对象.js的类是有一下三部门组成1.构造函数2.属性3.方法自定义一个类: function MyClass(id,age,name) { this.id = id; this.age = age; this.name = name; } 从这个类的定义形式可以看出,js定义类的形式和其他语言有很大的不

JS创建类和对象

JavaScript 创建类/对象的几种方式 非常好的一篇讲类和对象的文章,逐一测试,加深记忆:http://www.cnblogs.com/tiwlin/archive/2009/08/06/1540161.html 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组

JS创建类和对象（好多方法哟！）

http://www.cnblogs.com/tiwlin/archive/2009/08/06/1540161.html 这是别人写的~~~我借来看看 JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像

JS创建类和对象，看完了，头就不大了

JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像我们常听说的HASH表.字典.健/值对?),而其中的值类型可能是内置类型(如number,string),也可能是对象. 一.由一对大括号括起来 var

JavaScript中的类数组对象

在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"];    //取obj对象的attr1属性 a[1];   //取数组a中的第二个元素 但是,有些时候,也会将一个对象“伪装”成一个数组来用,我们把这种对象称为“类数组对象”,再此我们可以給它下一个定义,请看如下的代码: var a= {}; var i = 0; for(i=0; i<10 ; i++){ a[i

js定义类或对象

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js oop 总结</title> </head> <body> <script> /*1 原始方式 *缺点:需要创建多个car实例,推荐等级★ */ var ocar = new Object(); ocar.color

JS中集合对象(Array、Map、Set)及类数组对象的使用与对比

原文地址 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型,Array,Map,Set都属于iterable类型,它们可以使用for...of循环来遍历,都内置forEach方法. 数组 遍历 普通遍历 最简单的一种,也是使用频率最高的一种. let arr = ['a', 'b', 'c', 'd', 'e'] for (let i = 0; i < ar

JavaScript定义类与对象的一些方法

最近偶然碰到有朋友问我"hoisting"的问题.即在js里所有变量的声明都是置顶的,而赋值则是在之后发生的.可以看看这个例子: 1 var a = 'global'; 2 (function () { 3     alert(a); 4     var a = 'local'; 5 })(); 大家第一眼看到这个例子觉得输出结果是什么?'global'?还是'local'?其实都不是,输出的是undefined,不用迷惑,我的题外话就是为了讲这个东西的. 其实很简单,看一看JavaS