new mediacontroller(this) this报错_你可能不知道的元属性new.target

最新推荐文章于 2021-05-28 08:58:42 发布
最新推荐文章于 2021-05-28 08:58:42 发布
阅读量145 收藏
点赞数
文章标签： new mediacontroller(this) this报错
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39975261/article/details/111615498
版权
c02631b841c28fca832722ffd11e3ca0.png

一道面试题

有一个构造函数Class，且不定义全局变量, 需满足如下条件：

 function Class(name){
      // 待实现
 }    

需满足：

const Class1 = new Class("张三");
const Class2 = new Class("李四");
Class1.id==1;                  // true
Class2.id==2;                  // true

console.log(Class1, Class2);
console.log(Class1.prototype == Class2.prototype);    // true

const Class3 = Class("王五");
Class3.id==3;                                         // true
console.log(Class3.prototype == Class2.prototype);    // true
console.log(Class3.prototype == Class1.prototype);    // true

instanceof 问题

在es5中，通常判断一个对象是否是一个类的实例的时候使用instanceof关键字，例如如下代码：

function Person(name) {
    if (this instanceof Person) {
        this.name = name
    } else {
        throw new Error('必须使用new关键字来调用Person')
    }
}

当判断this不是Person类的实例的时候，将会抛出一个异常。

但是如下通过call或apply修改this绑定作用域，那么** 在Person类中是无法区分到底是通过Person.call()或Person.apply()还是new关键字调用得到的Person实例 **。

所以，如下代码也能够正常执行：

let person = new Person('Leevare')
let anotherPerson = Person.call(person, 'Jason')   //this.name='Jason', 对person对象name赋值
74161b6b96ba4a50e9242a66fd565c72.png

在es6中引入了new.target这个元属性。当通过new的方式调用时，new.target将会被赋予新创建的对象实例，此处则为Person，其它方式将会为undefined。

function Person(name) {
    if(new.target !== Person) {
        throw new Error('必须使用new关键字来调用Person')
    }else {
        this.name = name
    }
}

此时，若使用call或apply则会抛出异常。

7bddf7f83cc113a59c8ed4bec8fbd2e0.png

new.target

使用场景： 如果一个构造函数不通过 new 命令生成实例, 就报错提醒或自身返回new 实例

ES6引入了new.target属性，用于确认当前作用的在哪个构造函数上。若没有通过new命令调用构造函数。则new.target会返回undefined，否则返回当前构造函数。

new.target语法由一个关键字"new"，一个点，和一个属性名"target"组成。通常"new."的作用是提供属性访问的上下文，但这里"new."其实不是一个真正的对象。不过在构造方法调用中， new.target指向被new调用的构造函数，所以"new."成为了一个虚拟上下文 。

new.target这个属性,当子类继承父类会返回子类的构造函数名称

class Parent {
        constructor() {
            //  Child子类继承父类, 那么父类构造函数中的 new.target 是子类构造函数的名称
            console.log(new.target)   
        }
    }
    
    class Child extends Parent {
        constructor() {
            super()
        }
    }
    
    // Child

new.target属性适用于所有函数访问的元属性。

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>

<body>
    <script>function Class(name) {if (new.target == Class) {this.name = name;this.id = ++Class.id;
            } else {return new Class(name);
            }
        }
        Class.id = 0;
        Class.prototype = {
            say() {
            }
        }const Class1 = new Class("张三");const Class2 = new Class("李四");console.log(Class1, Class2);console.log(Class1.prototype == Class2.prototype);const Class3 = Class("王五");console.log(Class3);console.log(Class3.prototype == Class2.prototype);console.log(Class3.prototype == Class1.prototype);script>
body>

html>
a4030016779996ab107c96a68d1b6e3b.png

或者

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>

<body>
    <script>function Class(name) {if (this instanceof Class) {this.name = name;this.id = ++Class.id;
            } else {return new Class(name);
            }
        }
        Class.id = 0;
        Class.prototype = {
            say() {
            }
        }const Class1 = new Class("张三");const Class2 = new Class("李四");console.log(Class1, Class2);console.log(Class1.prototype == Class2.prototype);const Class3 = Class("王五");console.log(Class3);console.log(Class3.prototype == Class2.prototype);console.log(Class3.prototype == Class1.prototype);script>
body>

html>
763611dc11c449af5e0ab038d2552ee9.png

Promise输出顺序面试题

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script>const timeout = ms => new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve();
            }, ms);
        });const ajax1 = () => timeout(5000).then(() => {console.log('1');return 1;
        });const ajax2 = () => timeout(1000).then(() => {console.log('2');return 2;
        });const ajax3 = () => timeout(2000).then(() => {console.log('3');return 3;
        });const mergePromise = ajaxArray => {// 在这里实现你的代码// 保存数组中的函数执行后的结果var data = [];// Promise.resolve方法调用时不带参数，直接返回一个resolved状态的 Promise 对象。var sequence = Promise.resolve();
            ajaxArray.forEach(function (item) {console.log(item);// 第一次的 then 方法用来执行数组中的每个函数，// 第二次的 then 方法接受数组中的函数执行后返回的结果，// 并把结果添加到 data 中，然后把 data 返回。
                sequence = sequence.then(item).then(function (res) {
                    data.push(res);return data;
                });
            })// 遍历结束后，返回一个 Promise，也就是 sequence， 他的 [[PromiseValue]] 值就是 data，// 而 data(保存数组中的函数执行后的结果) 也会作为参数，传入下次调用的 then 方法中。return sequence;
        };
        mergePromise([ajax1, ajax2, ajax3]).then(data => {console.log('done');console.log(data); // data 为 [1, 2, 3]
        });// 要求分别输出// 1// 2// 3// done// [1, 2, 3]script>
head>

<body>

body>

html>
html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script>const timeout = ms => new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve();
            }, ms);
        });const ajax1 = () => timeout(5000).then(() => {console.log('1');return 1;
        });const ajax2 = () => timeout(1000).then(() => {console.log('2');return 2;
        });const ajax3 = () => timeout(2000).then(() => {console.log('3');return 3;
        });const mergePromise = async (urls) => {const arr = [];// 并发执行const textPromises = urls.map(url => {return url();
            });// 按次序输出for (const textPromise of textPromises) {
                arr.push(await textPromise);
            }return arr
        };
        mergePromise([ajax1, ajax2, ajax3]).then(data => {console.log('done');console.log(data); // data 为 [1, 2, 3]
        });// 要求分别输出// 1// 2// 3// done// [1, 2, 3]script>
head>

<body>

body>

html>

JS找出数组array出现最多的item项

不区分数组item类型

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>

<body>
    <script>var a = [1, 'a', 2, 3, 4, '4', 'c', 'aaa', 54, 54, 54, 54, 534, 43, 4, 56, 76, 8, 678, 78, 77, 97, 1, '54',1, "1", "a"];var b = a.reduce((obj, item) => {
            item in obj ? obj[item]++ : obj[item] = 1return obj
        }, {});var c = Object.entries(b).sort((a, b) => {return b[1] - a[1]
        });console.log(c);console.log(c[0]);script>
body>

html>
d1fd425d696e164076bac1395d9171b2.png

区分数组item类型

html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>

<body>
    <script>var a = [1, 'a', 2, 3, 4, '4', 'c', 'aaa',54, 54, 54, 54, 534, 43, 4, 56, 76, 8,678, 78, 77, 97, 1, '54', 1, "1", "a"];var b = a.reduce((map, item) => {if (map.has(item)) {const val = map.get(item);
                map.set(item, val + 1);
            } else {
                map.set(item, 1);
            }return map;
        }, new Map());var c = [...b.entries()].sort((a, b) => {return b[1] - a[1]
        });console.log(c);console.log(c[0]);script>
body>

html>
1cfb31c4eb008ed3e0563f4bbff80cee.png
weixin_39975261
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
C++之inline函数使用总结
码莎拉蒂
03-22 3433
一、C++为什么引入inline函数？ 主要目的：用它代替C语言中表达式形式的宏定义来解决程序中函数调用的效率问题。 C语言中的宏定义，它使用预处理器实现，没有了参数压栈、代码生成等一系列得到操作，因此效率很高。 但缺点如下： 预处理器符号表中的简单替换，不能进行参数有效性的检测，不能享受C++编译器严格类型检查的好处。 另外，它的返回值也不能被强制转换为可转换的合适类型。 C++如果
MediaController
07-12
**MediaController 深度解析** MediaController 是一个与媒体播放相关的控制器，它在软件开发中，尤其是在构建多媒体应用时，扮演着至关重要的角色。在这个项目中，我们主要关注的是如何利用 JavaScript 这种强大的...
理解函数的执行上下文和调用栈
alokka的博客
12-15 708
首先我们要知道所有的 JavaScript 函数执行时都是有上下文的。 那么，什么是函数的执行上下文呢？简单说来就是函数中 this 所指向的对象。 函数上下文就是函数中的 this 函数中的 this 指向和函数的定义位置、执行位置无关 函数中 this 的指向只取决于函数的调用方式 举个栗子： function foo() { console.log(this.name); } 当我们创建了一个函数的时候，我们并不知道此时的 this 指向什么，所以说创建函数的时候，我们并不知道 th.
android 控制器,Android - 媒体控制器不显示
weixin_26854475的博客
05-28 334
我有一个videoView，我在那里显示一个视频，我想显示默认的媒体控制器 . 出于某种原因，控制器似乎不想出现 .我尝试使用xml创建MediaController，将其设置为始终可见，使用 mMediaController.setMediaPlayer(mVideoView) 将其附加到媒体播放器，但似乎没有任何效果 .可能发生什么？听众是否会输掉比赛？是不是附加到实际的视频播放？我应该在我正...
使用VideoView和MediaController进行视频播放
xidajiancun
11-21 373
一个视频播放的activity，可以直接拿过来用，比较简单，直接贴个代码留作记录，效果如下： /** * 视频播放的activity&lt;br&gt; * 使用方法：&lt;br&gt; * 1、AndroidManifest.xml中添加此activity&lt;br&gt; * 2、Intent中存入待播放视频的URL，支持本地和网络&lt;br&gt; * 3、启动...
android_videoview.rar_android
09-24
通过设置MediaController，VideoView还能提供视频播放控制，如播放、暂停、快进、快退等。 2. **Android项目结构**： - `.classpath`：定义了项目的类路径，包括库引用和其他编译时依赖。 - `.project`：Eclipse ...
VideoViewActivity.rar_Java编程_Java_
08-10
mediaController.setAnchorView(videoView); videoView.setMediaController(mediaController); ``` 6. **全屏模式**： 如果需要实现全屏播放，可以重写`onConfigurationChanged()`方法，并在其中处理屏幕方向...
VideoPlayerProject.rar_android开发_Java_
08-11
在Eclipse中，选择"New -> Android Project"，填写项目名（如"VideoPlayerProject"），选择目标SDK版本（2.3.3），然后创建必要的项目结构，包括src、res、AndroidManifest.xml等。 在项目中，我们关注的核心是**...
MP3Player.rar_Java编程_Java_
08-10
1. **源代码**：.java文件，包含了播放器的各个模块，如主活动（MainActivity.java）负责界面展示和用户交互，MediaController.java用于播放控制，MediaPlayer.java用于音频播放。 2. **资源文件**：res目录下会有...
es6之async函数
qq_38872934的博客
10-13 240
含义 async函数是Generator函数的语法糖。 写法 async函数就是将Generator函数的星号（*）替换成async，将yield替换成await。 依次读取两个文件，Generator函数写法： const fs = require('fs'); const readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(fileName, function(e
关于MediaController的自定义
taoxugang2012的专栏
11-06 6900
移植android的MediaController代码。
MediaController的重写
white_pan的博客
04-04 1718
最近研究视频播放器看到videoview比较便捷就使用了下，但是我的需求不是触控而是遥控，所以获取焦点后要让其背景变色以便于查看焦点位置，所以要重写他的mediacontroller样式，查找资料百度后都介意用mediaplayer与surfaceview代替videoview比较好，但是我这人就懒的，既然有了完整的就不想再重新研究其他的。 public class MyMediaContro...
MediaPlayer MediaController
guchuanhang的专栏
02-27 3966
MediaPlayer和MediaController联合使用的例子
使用VideoView+MediaController实现视频播放器
qq_37465836的博客
02-23 6603
使用VideoView+MediaController实现视频播放器 1.界面设计 2.实现代码 3.播放权限 1.界面设计（activity_video_view.xml） <VideoView android:layout_width="match_parent" android:layout_height="400dp" android
new mediacontroller(this) this报错_JavaScript系列：揭开new运算符的神秘面纱
weixin_39691233的博客
12-23 53
我们经常会使用new运算符创建一个数组（Array）、对象（Object）等，那么new到底是什么?new的定义new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new的作用根据new的定义，我们很容易地得出new的作用就是创建一个对象，其实并不是这样，new是用来继承的，我们通过这样的实例理解new继承 - new的使用实例function person(name, ...
自定义VideoView或MediaPlayer的MediaController播放样式
midux的博客
03-23 8908
项目中需要做一个视频播放模块，大体是用的七牛播放器android端SDK+SurfaceView+自定义MediaController。这里就只介绍自己写的mediaController。下面正式开始。 三步走：重点内容 1. 定义MediaControllerInterface接口 2. 自定义controller类，实现MediaControllerInterface接口 3. ...
'MediaController(android.content.Context)' in 'android.widget.MediaController' cannot be applied to '(com.example.wwtv.MoviFragement)'
最新发布
05-24
这个错误提示表明在你的代码中，你给`android.widget.MediaController`传递了一个不合适的参数类型。具体来说，你传递了一个`com.example.wwtv.MoviFragement`类型的参数，但是`android.widget.MediaController`的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值