js 面向对象 原型和原型链

2022/3/27 23:26:50

本文主要是介绍js 面向对象 原型和原型链,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

数据类型分类和判断

分类

  • 基本(值)类型
    • String :任意字符串
    • Number : 任意数字
    • boolean : true/false
    • undifined : undifined
    • null : null
  • 对象(引用)类型
    • Object : 任意对象
        var obj = {
            name : '张三',
            age : 20
        };
    
    • Function : (一种特殊的对象) 函数
    var fn = function(){
        console.log("hello world!");
    }
    fn();
    
    • Array : (一种特殊的对象) 数组
    var arr = [1,2,3]
    

判断

  • typeof
    • 可以判断: undifined / 数值 / 字符串 / 布尔值 / function
    • 不可以判断 null与object array和object null和array都会返回object
//1.基本
//typeof 返回数据类型的字符串表达
var a ;
console.log(a , type a , type a==='undifined' , a === undifined);
console.log(undefined===='undefined');
a = 4 ;
console.log(typeof a==='number');
a = '张三';
console.log(typeof a==='string');
a = null;
console.log(typeof a===null); //false null的typeof 是 'object'
  • instanceof (instance - 实例)
    • 判断对象的具体类型
var obj = {
    name : "张三",
    age : 20
};
var fn1 = function(){
    console.log("hello world !");
};
var arr = [1,2,3];
console.log(obj instanceof Object , obj instanceof Array); // true , false
console.log(arr instanceof Array , arr instanceof Object); // true , true
console.log(fn instanceof Function , fn instanceof Object); //true true 因为函数也是一种特殊的对象

console.log(typeof fn ==='function'); //true
  • ===
    • 可以判断undifined 和 null
注意的问题
  • undefined 与 null 的区别
    • undifined代表定义未赋值
    • null是给变量赋值给null
  • 什么时候给变量赋值为null
    • 初始赋值为null , 表明将要赋值为对象
    • 结束前赋值为null,让对象成为垃圾对象(被垃圾回收机器回收)

数据 - 变量 - 内存

  • 什么是数据

    • 存储在内存中代表特定信息,本质上是二进制代码
    • 一小块内存的两个数据
      • 内部存储的数据
      • 地址值
    • 内存分类
      • 栈:全局变量/局部变量
      • 堆:对象
          var obj = { name : 'tome'} // obj在栈空间中(变量名和对象存在堆空间中的地址) , {}中的内容在堆空间中
      
    • 数据的特定: 可传递 ; 可运算 ;
  • 什么是内存

    • 用于存储数据的空间
  • 什么是变量

    • 可变化的量 , 由变量名和变量值组成
    • 每个变量都对应的一块内存,变量名来查找到对应的内存,变量值是内存中保持的数据
  • 内存,数据,变量三者直接的关系

    • 内存是用来存储数据的空间(临时)
    • 变量是内存的标识
注意的问题
  • js引擎如果管理内存
    • 内存生命周期
      • 分配小内存空间,获取使用权
      • 存储数据,可以反复进行操作
      • 释放小块内存
    • 释放内存
      • 局部变量:函数执行完自动释放
      • 对象:成为垃圾对象(没有变量指向)==>垃圾回收器回收
        function fn(){
            var obj = {};
        }
        fun(); //b是自动释放,b所指向的对象在后面的某个时刻被垃圾回收器回收
    

对象

  • 什么是对象
    • 多个数据的封装体
    • 用来保存多个数据的容器
    • 一个对象代表显示事件中的一个事物
  • 为什么要用对象
    • 统一管理多个数据
  • 对象的组成
    • 属性 : 属性名(字符串)和属性值(任意类型)组成
    • 方法 : 一种特别的属性(属性值是函数)
  • 如何访问对象内部数据
    • .属性名
    • ['属性名'] 当属性名包含特殊字符:- 空格只能用这种方式获取

函数

  • 什么是函数
    • 实现特定的功能的n条语句的封装体
    • 只有函数是可以执行的,其他类型的数据不能执行
  • 为什么要用函数
    • 提高代码的复用
    • 便于阅读
  • 如何定义函数
    • 函数声明 function fn1(){}
    • 表达式 var fn2 = function(){} //区别是会变量提升
  • 如何调用函数
    • test() 直接调用
    • obj.test() 通过对象调用
    • new test() new调用
    • test.call/applay(obj) : obj.test() //临时让test的方法变成obj的方法调用
    var obj = {
        name : 'jack'
    };
    function setName(){
        this.name = 'tom';
    }
    //obj.setName() 
    setName.call(obj); //可以让一个函数成为知道任意对象的方法被调用
    console.log(obj.name);

回调函数

  • 什么是回调函数
    • 自定义的
    • 没有调用却执行了
  • 常见的回调函数
    • dom事件的回调函数
    • 定时器回调函数
    • ajax请求回调函数
    • 生命周期回调函数

IIFE

  • Immediately-Invoked Function Expression
    • 立即调用函数表定式
  • 作用
    • 隐藏实现
    • 不会污染外部(全局)命名空间
    • 用它来编写js模块
    (function(){ //匿名函数
        var a =3 ;
        console.log(a+3);
    })();
    var a = 1;
    console.log(a)
    (function(){ //匿名函数
        function test(){
            consol.log(++a);
        }
        function test2(){
            console.log('test2');
        }
        window.$ = function(){ //向外暴露一个全局函数
            return {
                test : test 
            }
        }
    })();
    //1.$是一个函数 2.$执行后返回的是一个的对象
    $().test;
    

函数的prototype

  • 函数的prototype属性
    • 每个函数都有一个prototype属性,它都默认指向一个Object空对象(即称为:原型对象)
    • 原型对象中有一个属性constructor,它指向函数对象
  • 给原型对象添加属性(一般都是方法)
    • 作用:函数的所有实例对象自动拥有原型中的属性(方法)
function fun(){
    
}
fun.prototype.test = function(){
    console.log('----test----');
}
console.log(fun.prototype); //默认指向一个Object空对象
console.log(fun.prototype === fun); //true

//给原型对象添加属性(一般是方法) ===>实例的对象可以访问
var f = new fun();
f.test();

显示原型与隐式原型

  • 每个函数都有一个prototype属性,即显示原型(属性)
  • 每个实例对象都有一个__proto__,可称为隐式原型
  • 对象的隐式原型的值是对应构造函数的显性对象的值
    //定义构造函数
    function fun(){ //内部语句:this.prototype = {}
    
    }
    //创建实例对象
    var f = new fun() // 内部语句: __proto__ = fun.prototype
    //给原型添加方法
    fun.prototype.test = function(){
        console.log("--test--");
    };
    //通过实例调用方法
    f.test();
    
  • 内存结构

原型链

  • 原型链
    • 访问一个对象的属性时
      • 先在自身属性中查找,找到返回
      • 如果没有,再沿着__proto__这条链向上查找
      • 如果最终没有找到,返回undifined
    • 别名:隐式原型链
    • 作用:查找对象的属性方法
    • 原型上的属性和方法是提供给原型链上的实例使用的,原型的继承也是通过原型链
  • 图解
console.log(Object);
console.log(Object.prototype);
console.log(Object.prototype.__proto__); //null
function Fn(){
	this.test1 = function(){
		console.log('test1');
	}
}
var fn = new Fn();
Fn.prototype.test2 = function(){
	console.log('--test2--');
}
fn.test1();
fn.test2();
console.log(fn.test3) //undifined
fn.test3(); //报错 fn.test3不是一个方法

注意
  • 函数的显示原型指向对象的空Object实例对象(但Object不满足)
function Fn (){
    
}
console.log(Fn.prototype instanceof Object); //true
cosole.log(Object.proptotype instanceof Object); // false
cosole.log(Fuction.proptype instanceof Object);//true
  • 所有函数都是Function的实例(包含Function本身)

instanceof

  • instanceof 是如何判断的?
    • 表达式:A instanceof B
    • 如果B函数的显示原型对象在A对象的原型链上,返回true


这篇关于js 面向对象 原型和原型链的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程